封装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的主要内容,如果未能解决你的问题,请参考以下文章

封装axios

Vue--封装axios跨域

axios封装

vue中axios请求封装

vue中axios请求封装

axios封装