axios的封裝
- 下載axios
npm i axios或者yarn add axios - 項(xiàng)目中往往會(huì)有很多的接口和請(qǐng)求欧聘，將所有接口和請(qǐng)求如果不做統(tǒng)一處理的話就會(huì)很繁雜挽懦，放在組件當(dāng)中也會(huì)特別亂，因此我們會(huì)在src下面新建一個(gè)request文件夾來(lái)專門(mén)管理請(qǐng)求接口
request/request.js中
import axios from "axios"
const insatnce = axios.create({
baseURL:"接口"茧球，//在項(xiàng)目的最后這里的地址是根據(jù)配置的環(huán)境變量來(lái)改變的（代理服務(wù)器）
timeout:5000,//請(qǐng)求過(guò)期時(shí)間
})
export default instance
- 請(qǐng)求攔截器恃逻，在同一個(gè)文件中
請(qǐng)求攔截器指的是，在頁(yè)面發(fā)送請(qǐng)求的時(shí)候晤锹，要先經(jīng)過(guò)這個(gè)階段，請(qǐng)求才能被發(fā)送到服務(wù)器 彤委，當(dāng)一個(gè)web頁(yè)面在用戶登錄之后用戶再發(fā)送請(qǐng)求時(shí)鞭铆，默認(rèn)是需要帶上請(qǐng)求頭的，可以在請(qǐng)求攔截器中做統(tǒng)一處理
import axios from "axios"
const insatnce = axios.create({
baseURL:"接口"焦影，//在項(xiàng)目的最后這里的地址是根據(jù)配置的環(huán)境變量來(lái)改變的（代理服務(wù)器）
timeout:5000,//請(qǐng)求過(guò)期時(shí)間
})
instance.interceptors.request.use(config=>{
//config 是一個(gè)對(duì)象车遂，攜帶了本次請(qǐng)求的信息，
//config.header可以攜帶請(qǐng)求頭
//必須返回一個(gè)config
config.heder["token"]=token
return config
},err=>{
return Promise.reject(err)
})
export default instance
- 響應(yīng)攔截器
響應(yīng)攔截器是斯辰，在前端發(fā)送請(qǐng)求之后舶担，后端響應(yīng)的數(shù)據(jù)會(huì)優(yōu)先經(jīng)過(guò)響應(yīng)攔截器，并數(shù)據(jù)返回給組件中請(qǐng)求的res彬呻，
import axios from "axios"
const instance = axios.create({
baseURL:"接口"衣陶，//在項(xiàng)目的最后這里的地址是根據(jù)配置的環(huán)境變量來(lái)改變的（代理服務(wù)器）
timeout:5000,//請(qǐng)求過(guò)期時(shí)間
})
instance.interceptors.response.use(res=>{
//必須return res
//可以在這里處理錯(cuò)誤
return res.data //返回的數(shù)據(jù)最終被組件接受
})