我們從封裝axios請(qǐng)求中來(lái)講解攔截器
首先引入axios
import axios from 'axios'創(chuàng)建axios請(qǐng)求dolphinRequest
const dolphinRequest = axios.create({
baseURL: ip地址
timeout: 15000 //定義請(qǐng)求超時(shí)時(shí)長(zhǎng)
})
*請(qǐng)求發(fā)送之前攔截（可以處理一些數(shù)據(jù)）
dolphinRequest.interceptors.request.use(
config => {
//統(tǒng)一設(shè)置請(qǐng)求頭部信息
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
//判斷請(qǐng)求方式是post還是get
if (config.method === 'post') {
config.data = qs.parse(config.data)
}
if (config.method === 'get') {
config.params = { ...config.params }
config.params = qs.parse(qs.stringify(config.params))
}
//數(shù)據(jù)根據(jù)請(qǐng)求方式進(jìn)行拼接發(fā)送給后臺(tái)
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
*后臺(tái)相應(yīng)之后的攔截（對(duì)接收的數(shù)據(jù)進(jìn)行處理之后再使用）
dolphinRequest.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) { //錯(cuò)誤提示
return Promise.reject(res.msg || 'Error')
} else { //成功返回?cái)?shù)據(jù)
return res
}
},
error => {
return Promise.reject(error)
}
)
- 導(dǎo)出封裝好的axios,供外部使用
export { dolphinRequest }
