請求攔截器

相當于一個關卡，如果滿足條件就放行請求，不滿足就攔截

響應攔截器 在處理結果之前，先對結果進行預處理，比如：對數據進行一下格式化的處理

全局請求攔截器

axios.interceptors.request.use(config => {
//請求之前需要做的一些事情//config.url = 'www.xcccc.com'//請求請修改請求的url//config.timeout = 2000//請求前修改超時時間//config.method = 'POST'//修改請求方式return config //請求成功必須返回
}, error => {return Promise.reject(error) //請求失敗時的函數}

config 參數

---

全局響應攔截器

axios.interceptors.response.use(response => {console.log(response)//return response.data//直接將 res.data數據返回return response
}, error => {console.log('響應數據失敗')return Promise.reject(error)//請求失敗時的函數
}
)

也可以在請求回來時對數據進行處理，下面是response的對象

---

攔截器執行順序

請求攔截器成功=》響應攔截器成功

---

請求攔截器失敗=》響應攔截器失敗 =》請求失敗的自定義回調（非必須）

---

請求攔截器成功=》（服務器404） =》 響應攔截器失敗 =》請求失敗的自定義回調

---

完整代碼

main.js

import '@/api'

api.js

import axios from "axios";
import Vue from "vue";//請求攔截器 表示請求要發出時需要的操作
axios.interceptors.request.use(config => {// config.url = 'www.xcccc.com'// //請求請修改請求的url// config.timeout = 2000// //請求前修改超時時間// config.method = 'POST'// //修改請求方式console.log('請求時發送成功')return config //請求成功必須返回
}, error => {console.log('請求時發送失敗')return Promise.reject(error)//請求失敗時的函數
})axios.interceptors.response.use(response => {return response//直接將 res.data數據返回
}, error => {console.log('響應數據失敗')return Promise.reject(error)
}
)Vue.prototype.$axios = axios

 this.$axios.get('https://apis.jxcxin.cn/api/mi?user=177********&password=******&step=8000',).then(res => {console.log(res)}).catch(error => {console.log('請求失敗自定義的回調')})