axios拦截器与基本使用

一、拦截器介绍

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

请求拦截器

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

响应拦截器

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

二、Axios实例

1. 创建axios实例

// 引入axios
import axios from 'axios'

// baseURL设置
let baseURL = 'xxxxxxxxxxx'
// 创建实例
let http1 = axios.create({
    baseURL,
    timeout: 2000 // 毫秒
})

2. 修改实例配置的三种方式

// 第一种：局限性比较大
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)
})

2. 响应拦截器

// 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 => {
      // 错误处理
  })