正常情況下打開瀏覽器前端頁面向后端發(fā)起請求使用的是axios，無論是原生的axios還是自己封裝的axios都看成是axios。發(fā)起請求之后后端去數(shù)據(jù)庫里面拿數(shù)據(jù)，然后返回給前端。

發(fā)起請求的地方是axios，并且你能夠封裝這個axios，那么你就可以添加攔截器。

請求攔截器就是你在發(fā)起請求的時候應(yīng)該做什么事情，響應(yīng)攔截器就是你在接收到這個請求之后應(yīng)該去干什么。

• 請求攔截應(yīng)用場景： 發(fā)起請求前添加header

使用最多的場景就是前端調(diào)用后端，后端是有鑒權(quán)邏輯的，前端需要添加一個token。前端在登入的時候就應(yīng)該獲取這個token了，這個token加到url的參數(shù)之內(nèi)。?

• 統(tǒng)一處理API響應(yīng)狀態(tài)碼200或非200的提示消息，拿到業(yè)務(wù)的狀態(tài)碼。做一些自定義的響應(yīng)配置
• 統(tǒng)一處理catch異常提示信息

主要去處理響應(yīng)是否成功，拿到返回業(yè)務(wù)狀態(tài)碼的邏輯，這個時候其實(shí)是自定義的響應(yīng)，到底業(yè)務(wù)有沒有成功，這決定了你的前端展示。

這些都是優(yōu)先于你的axios.get()/post()去執(zhí)行的，不管是在get/post發(fā)起請求之前還是獲得響應(yīng)之后，你得先經(jīng)過攔截器?。?！不然封裝也沒多大的意義。

import axios from "axios"

const axios_instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//請求之前要去干什么
//添加請求攔截器,固定寫法，config是接受參數(shù)，可以取其他名稱
//能夠利用config的方式去做請求攔截上面的配置
axios_instance.interceptors.request.use(
    config => {
    //在請求之前做的事情，比如添加請求頭
    config.headers['Test-header'] = 'zhangsan'
    return config
},
    error=>{
    //請求發(fā)生了error，處理請求錯誤
    //axios是基于ajax和promise封裝的
    //Promise.reject代表在使用instance發(fā)起請求的時候，失敗了在catch語句中可以獲取
    //.then .catch .finally都是promise提供的能力
    return Promise.reject(error)
 }
)

?響應(yīng)攔截器文章來源地址http://www.zghlxwxcb.cn/news/detail-765297.html

import axios from "axios"

const axios_instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//請求之前要去干什么
//添加請求攔截器,固定寫法，config是接受參數(shù)，可以取其他名稱
//能夠利用config的方式去做請求攔截上面的配置
axios_instance.interceptors.request.use(
    config => {
    //在請求之前做的事情，比如添加請求頭
    config.headers['Test-header'] = 'zhangsan'
    return config
},
    error=>{
    //請求發(fā)生了error，處理請求錯誤
    //axios是基于ajax和promise封裝的
    //Promise.reject代表在使用instance發(fā)起請求的時候，失敗了在catch語句中可以獲取
    //.then .catch .finally都是promise提供的能力
    return Promise.reject(error)
 }
)


//添加響應(yīng)攔截器，響應(yīng)之后需要干什么
//先在這里處理，最后到你的.vue組件當(dāng)中的.then().catch().finally()中處理
//要先經(jīng)過這個地方
axios_instance.interceptors.response.use(
    response =>{
    //響應(yīng)接收后做的事情，在.then .catch接受之前
    //業(yè)務(wù)層的報錯 
        if(response.data.code != 200){
            alert('數(shù)據(jù)請求失敗')
            return Promise.reject(response)
        }
        return response
    },
    error =>{
        //狀態(tài)碼非200范圍內(nèi)
        return Promise.reject(error)
    }
)

export default axios_instance

到了這里，關(guān)于Vue axios 攔截器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！