封装axios
Posted yangshuzhong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了封装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
以上是关于封装axios的主要内容,如果未能解决你的问题,请参考以下文章