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)
})