axios攔截器使用

攔截器的概念

其實就是你是想攔截住咱們的這個請求的過程，好比你想在請求前先作一些事，攔截下請求，等這件事作完在去請求，或者是要等請求結束作一些事，再返回數據，能夠攔截處理以後再返回，其過程大白話一些解釋就是如此，本人最怕聽一些很高深的概念性解釋，這裏輸出就不說那麼多專業的術語！

axios提供了四種攔截方式：

• axios有一個全局攔截的方式： axios.interceptors()
• 攔截成功後必須return返回，不然數據沒法請求到

請求成功與請求失敗時攔截

// instance實例攔截請求

    instance.interceptors.request.use(
        config => {
            console.log(config);
           	// 攔截後在這裏處理信息
            return config;
        }, err => {
            console.log(err);
        }) 
複製代碼

使用場景：

1. 好比config中的一些信息不符合服務器要求,能夠在這裏進行處理， 或者添加自定義的headers
2. 好比每次發送網絡請求時，都但願在界面中顯示一個請求的圖標，請求時顯示，成功後隱藏
3. 好比某些網絡請求（好比登陸必須攜帶（token））,必須攜帶一些特殊信息

響應成功時與響應失敗時攔截

好比咱們這裏攔截響應後只返回了一個data數據，其餘數據就被過濾掉了，那麼最後請求得到的響應數據就只有data數據了！

// 攔截響應
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )
複製代碼

axios完整的封裝實例:

只須要將這條保存到一個request.js文件中，在其餘地方調用這個文件便可請求接口數據

import axios from 'axios'

// 這裏使用default導出，是爲了之後的擴展，能夠導出多個方法
export function request(config){
    // 1. 建立axios實例
    const instance = axios.create({
        baseURL: 'https://store.crmeb.net/api/pc',
        timeout: 5000
    })
    
    // 攔截請求
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
    
    // 攔截響應
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )


    // 發送請求
    return instance(config)  
}
複製代碼

使用方法

import { request } from "./network/request"

request({
    url: '/get_company_info',   
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
複製代碼