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)
})
复制代码