Vue.js - axios 拦截器的使用

最新推荐文章于 2023-03-14 12:38:12 发布

原创最新推荐文章于 2023-03-14 12:38:12 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #axios

前端开发专栏收录该内容

38 篇文章

订阅专栏

本文介绍了axios库的拦截器功能，包括请求拦截器和响应拦截器的使用方法，以及如何添加和移除拦截器。通过拦截器，可以在发送请求前或接收响应后进行自定义操作，如统一处理请求头、错误处理等。

axios

GitHub地址: https://github.com/axios/axios
中文网: http://www.axios-js.com/zh-cn/docs/
韩文网 : https://xn--xy1bk56a.run/axios/guide/#axios%EB%9E%80

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你想在稍后移除拦截器，可以这样：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器：

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

use参数

onFulfilled 可选的

如果方法满足Promise，此函数有一个参数，fulfillment value。如果不是函数，则在内部将其替换为“ Identity”函数（它返回接收到的参数）。

onRejected 可选的

如果方法被Promise拒绝，此函数有一个参数，rejection reason。如果不是函数，则在内部将其替换为“ Thrower”函数（它将引发作为参数接收的错误）。

export interface AxiosInterceptorManager<V> {
  use(onFulfilled?: (value: V) => V | Promise<V>, onRejected?: (error: any) => any): number;
  eject(id: number): void;
}