項目中我們現(xiàn)在都會用到axios汛兜， 不進(jìn)行封裝的話任柜，會特別麻煩谅摄，今天我們對axios進(jìn)行一個封裝法精，希望可以幫到需要幫助的朋友多律。
首先我們安裝axios
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
然后在我們的項目中新建一個request.js
request.js
request.js文件
- 首先引入axios， Vue
import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
然后創(chuàng)建axios實例
// 創(chuàng)建 axios 實例
// 項目需要多個請求地址搂蜓，baseURL就沒有用到了狼荞。
const service = axios.create({
// baseURL: process.env.VUE_APP_REQUEST_URL, // api base_url
timeout: 180000 // 請求超時時間
})
請求攔截
- 我理解主要用于在headers 中添加一些必要的信息， 如token帮碰，區(qū)分接口版本之類的相味，
// request interceptor
service.interceptors.request.use(config => {
// 在此處可以設(shè)置每次發(fā)出請求時， 先是一個loading圖殉挽，
const token = Vue.ls.get(ACCESS_TOKEN)
if (token) {
config.headers['Authorization'] = 'bearer ' + token // 讓每個請求攜帶自定義 token 請根據(jù)實際情況自行修改
}
config.headers['api-version'] = 'v1'
return config
}, err)
響應(yīng)攔截
理解為--統(tǒng)一處理接口返回錯誤的結(jié)果攻走，這個需要和后端小伙伴定制規(guī)則，如果多個接口返回規(guī)范不一此再，這里處理起來比較麻煩
// response interceptor
service.interceptors.response.use((response) => {
if (response.config.responseType === 'blob') {
// 如返回blob類型，就直接return response對象
return response
}
// 不是就返回里面的 data 玲销， 可以自行打印一下看看response對象的結(jié)構(gòu)
return response.data
}, err)
err函數(shù)
請求錯誤時統(tǒng)一處理输拇，根據(jù)狀態(tài)不同，是否清空token
const err = (error) => {
if (error.response) {
const data = error.response.data
const token = Vue.ls.get(ACCESS_TOKEN)
if (error.response.status === 403) {
notification.error({
message: 'Forbidden',
description: data.message
})
}
if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
// notification.error({
// message: 'Unauthorized',
// description: 'Authorization verification failed'
// })
if (token) {
store.dispatch('Logout').then(() => {
setTimeout(() => {
window.location.reload()
}, 1500)
})
}
}
}
return Promise.reject(error)
}
最后對外暴露就好了
export {
//installer as VueAxios,
service as axios,
//bAjaxNormal
}
看一下接口文件的用法
login.js
