本篇共 2320 字

axios拦截器使用

作者:admin   分类:前端   发布:6 月前   阅读量:1   浏览量:1

拦截器的概念

其实就是你是想拦截住我们的这个请求的过程,比如你想在请求前先做一些事,拦截下请求,等这件事做完在去请求,或者是要等请求结束做一些事,再返回数据,可以拦截处理之后再返回,其过程大白话一些解释就是如此,本人最怕听一些很高深的概念性解释,这里输出就不说那么多专业的术语!

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)
})
标签: vue axios
本篇共 0 条评论

留言内容:

还没有任何评论!

还没有登陆,请登录后发表评论!