封装axios
直接上代码
1 const request = { 2 post0 (url, params) { 3 return FEBS_REQUEST.post(url, params, { 4 headers: { 5 'Content-Type': 'application/json;charset=UTF-8' 6 } 7 }) 8 }, 9 post (url, params) { 10 return FEBS_REQUEST.post(url, params, { 11 transformRequest: [(params) => { 12 let result = '' 13 Object.keys(params).forEach((key) => { 14 if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) { 15 result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&' 16 } 17 }) 18 console.log(result, 'postResult1111111') 19 return result 20 }], 21 headers: { 22 'Content-Type': 'application/x-www-form-urlencoded' 23 } 24 }) 25 }, 26 put (url, params) { 27 return FEBS_REQUEST.put(url, params, { 28 transformRequest: [(params) => { 29 let result = '' 30 Object.keys(params).forEach((key) => { 31 if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) { 32 result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&' 33 } 34 }) 35 return result 36 }], 37 headers: { 38 'Content-Type': 'application/x-www-form-urlencoded' 39 } 40 }) 41 }, 42 put0 (url, params) { 43 return FEBS_REQUEST.put(url, params, { 44 headers: { 45 'Content-Type': 'application/x-www-form-urlencoded' 46 } 47 }) 48 }, 49 get (url, params) { 50 let _params 51 if (Object.is(params, undefined)) { 52 _params = '' 53 } else { 54 _params = '?' 55 for (let key in params) { 56 if (params.hasOwnProperty(key) && params[key] !== null) { 57 _params += `${key}=${params[key]}&` 58 } 59 } 60 } 61 return FEBS_REQUEST.get(`${url}${_params}`) 62 }, 63 delete (url, params) { 64 let _params 65 if (Object.is(params, undefined)) { 66 _params = '' 67 } else { 68 _params = '?' 69 for (let key in params) { 70 if (params.hasOwnProperty(key) && params[key] !== null) { 71 _params += `${key}=${params[key]}&` 72 } 73 } 74 } 75 return FEBS_REQUEST.delete(`${url}${_params}`) 76 }, 77 export (url, params = {}) { 78 message.loading('导出数据中') 79 return FEBS_REQUEST.post(url, params, { 80 transformRequest: [(params) => { 81 let result = '' 82 Object.keys(params).forEach((key) => { 83 if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) { 84 result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&' 85 } 86 }) 87 return result 88 }], 89 responseType: 'blob' 90 }).then((r) => { 91 const content = r.data 92 const blob = new Blob([content]) 93 const fileName = `${new Date().getTime()}_导出结果.xlsx` 94 if ('download' in document.createElement('a')) { 95 const elink = document.createElement('a') 96 elink.download = fileName 97 elink.style.display = 'none' 98 elink.href = URL.createObjectURL(blob) 99 document.body.appendChild(elink) 100 elink.click() 101 URL.revokeObjectURL(elink.href) 102 document.body.removeChild(elink) 103 } else { 104 navigator.msSaveBlob(blob, fileName) 105 } 106 }).catch((r) => { 107 console.error(r) 108 message.error('导出失败') 109 }) 110 }, 111 download (url, params, filename) { 112 message.loading('文件传输中') 113 return FEBS_REQUEST.post(url, params, { 114 transformRequest: [(params) => { 115 let result = '' 116 Object.keys(params).forEach((key) => { 117 if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) { 118 result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&' 119 } 120 }) 121 return result 122 }], 123 responseType: 'blob' 124 }).then((r) => { 125 const content = r.data 126 const blob = new Blob([content]) 127 if ('download' in document.createElement('a')) { 128 const elink = document.createElement('a') 129 elink.download = filename 130 elink.style.display = 'none' 131 elink.href = URL.createObjectURL(blob) 132 document.body.appendChild(elink) 133 elink.click() 134 URL.revokeObjectURL(elink.href) 135 document.body.removeChild(elink) 136 } else { 137 navigator.msSaveBlob(blob, filename) 138 } 139 }).catch((r) => { 140 console.error(r) 141 message.error('下载失败') 142 }) 143 }, 144 upload (url, params) { 145 return FEBS_REQUEST.post(url, params, { 146 headers: { 147 'Content-Type': 'multipart/form-data' 148 } 149 }) 150 } 151 } 152 153 export default request
然后在main.js中把方法挂到VUE原型链上
import request from 'utils/request' Vue.prototype.$post = request.post Vue.prototype.$get = request.get Vue.prototype.$put = request.put Vue.prototype.$delete = request.delete Vue.prototype.$export = request.export Vue.prototype.$download = request.download Vue.prototype.$upload = request.upload