axios拦截器与基本使用

2022/1/27 6:04:32

本文主要是介绍axios拦截器与基本使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、拦截器介绍

  • 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。

请求拦截器

  • 在请求发送之前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装。

响应拦截器

  • 响应拦截器在响应数据之前进行必要的操作,只是在请求得到响应之后,对响应体的一些处理,通常用来对数据的处理、判断登陆失效等。

二、Axios实例

  1. 创建axios实例
// 引入axios
import axios from 'axios'

// baseURL设置
let baseURL = 'xxxxxxxxxxx'
// 创建实例
let http1 = axios.create({
    baseURL,
    timeout: 2000 // 毫秒
})
  1. 修改实例配置的三种方式
// 第一种:局限性比较大
axios.defaults.baseURL = 'xxxxx'
axios.defaults.timeout = 1000;

// 第二种:实例配置
let http1 = axios.create({
    baseURL,
    timeout: 2000 // 超时401
})
// 创建完成后修改
http1.defaults.timeout = 3000

// 第三种:发起请求时修改配置
http1.get('/xxx', {
    timeout: 5000
})
  • 注:这三种修改配置方法的优先级如下:请求配置 > 实例配置 > 全局配置

三、配置拦截器

// 请求拦截器
实例1.interceptors.request.use(config => {}, err => {})
// 响应拦截器
实例1.interceptors.respone.use(respone => {}, err => {})
  • 从上可以看出对其进行拦截实例1,请求用config,响应用response,两者都有两个配置项,一个是成功配置,一个是error配置。
  1. 请求拦截器
// use(两个参数)
axios.interceptors.request.use(config => {
    // 在发送请求前做一些事
    ....
    return config
}, err => {
    // 在请求错误时做的事儿
    return Promise.reject(err)
})
  1. 响应拦截器
// use(两个参数)
axios.interceptors.respone.use(respone => {
    // 请求成功对响应数据做处理
    ....
    // 该返回的数据则是axios().then(res)中接受的数据
    return respone
}, err => {
    // 在请求错误时做的事儿
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})
  • 常见错误码处理(error)

    • axios请求错误时,可在catch里进行错误处理。
    axios.get().then().catch(err => {
        // 错误处理
    })
    


这篇关于axios拦截器与基本使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程