axios的封裝

• 下載axiosnpm i axios 或者yarn add axios
• 項(xiàng)目中往往會(huì)有很多的接口和請(qǐng)求，將所有接口和請(qǐng)求如果不做統(tǒng)一處理的話就會(huì)很繁雜，放在組件當(dāng)中也會(huì)特別亂，因此我們會(huì)在src下面新建一個(gè)request文件夾來(lái)專門管理請(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ù)最終被組件接受
})