Vue 簡(jiǎn)單的axios封裝

1、vue 簡(jiǎn)單的axios封裝安裝axios 起手安裝axios npm install axios request.js 該文件中對(duì)axios舉行封裝 import axios from &39;axios&39; const baseurl = &39;http:/localhost:4000/api&39; / 創(chuàng)建 axios 實(shí)例 const service = axios.create（ baseurl: baseurl, / 哀求地址前綴，將自動(dòng)加在 url 前面 timeout: 6000 / 哀求超時(shí)時(shí)光 ） / axios哀求攔截器 servi

2、erceptors.request.use（config => if （localstorage.getitem（&39;logintoken&39;） / 哀求統(tǒng)一設(shè)置header config.headers.authorization = localstorage.getitem（&39;logintoken&39;） return config , error => return promise.reject（error） ） / axios響應(yīng)攔截器 erceptors.response.use（respo

3、nse => return response.data , error => / console.log（&39;看一看&39;, error.response） const status = error.response if （status = 401） / token失效 message.error（&39;token失效，請(qǐng)重新登錄&39;） / 清除token localstorage.removeitem（&39;logintoken&39;） router.push（&39;/&39;） return p

4、romise.reject（error） ） export service as axios 在axios.create操作中還可以舉行其他的一些操作，諸如： 按照當(dāng)前環(huán)境切換不同的url（生產(chǎn)環(huán)境/開發(fā)環(huán)境/測(cè)試環(huán)境） baseurl: process.env.node_env = &39;production&39; ? &39;productapi&39;: &39;developapi&39; 1 統(tǒng)一哀求頭配置 headers: get: &39;content-type&39;: &39;application

5、/x-www-form-urlencoded;charset=utf-8&39; / 在開發(fā)中，普通還需要單點(diǎn)登錄或者其他功能的通用哀求頭，可以一并配置進(jìn)來(lái) , post: &39;content-type&39;: &39;application/json;charset=utf-8&39; / 在開發(fā)中，普通還需要單點(diǎn)登錄或者其他功能的通用哀求頭，可以一并配置進(jìn)來(lái) , 跨域、響應(yīng)碼處理 提供是否允許跨域的屬性——withcredentials: true/false 哀求響應(yīng)序列化 / 在向服務(wù)器發(fā)送哀求前，序

6、列化哀求數(shù)據(jù) transformrequest: function （data） data = json.stringify（data） return data , / 在傳遞給 then/catch 前，修改響應(yīng)數(shù)據(jù) transformresponse: function （data） if （typeof data = &39;string&39; && data.startswith（&39;&39;） data = json.parse（data） return data 同樣，攔截器中也可以自定義更多的內(nèi)容 api.js import axios from &39;./request&39; const api = user: &39;/user/getusers&39; export default api export function getu