axios拦截器管理类链式调用怎么实现

发布时间：2022-08-27 11:35:04 作者：iii
来源：亿速云阅读：284

Axios拦截器管理类链式调用怎么实现

引言

在现代前端开发中，网络请求是不可或缺的一部分。Axios 是一个基于 Promise 的 HTTP 客户端，广泛应用于浏览器和 Node.js 环境中。Axios 提供了强大的拦截器功能，允许我们在请求发送前和响应到达前对其进行处理。本文将详细介绍如何通过设计一个拦截器管理类，并实现链式调用，来更好地管理和使用 Axios 的拦截器。

Axios拦截器简介

Axios 拦截器分为请求拦截器和响应拦截器。请求拦截器允许我们在请求发送前对请求进行修改或添加一些通用的配置，例如添加认证信息、设置请求头等。响应拦截器则允许我们在响应到达前对响应进行处理，例如统一处理错误、格式化数据等。

请求拦截器

请求拦截器在请求发送前执行，通常用于修改请求配置或添加一些通用的请求头。

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers['Authorization'] = 'Bearer token';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截器

响应拦截器在响应到达前执行，通常用于处理响应数据或统一处理错误。

axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

拦截器的基本使用

在使用 Axios 时，我们通常会直接在代码中添加拦截器。这种方式虽然简单，但在大型项目中，拦截器的数量可能会非常多，导致代码难以维护。为了解决这个问题，我们可以设计一个拦截器管理类，将所有的拦截器集中管理，并通过链式调用的方式添加拦截器。

拦截器管理类的设计

为了集中管理拦截器，我们可以设计一个 InterceptorManager 类。这个类将负责管理所有的请求拦截器和响应拦截器，并提供链式调用的接口。

类的基本结构

class InterceptorManager {
  constructor() {
    this.requestInterceptors = [];
    this.responseInterceptors = [];
  }

  useRequest(fulfilled, rejected) {
    // 添加请求拦截器
  }

  useResponse(fulfilled, rejected) {
    // 添加响应拦截器
  }

  applyInterceptors(axiosInstance) {
    // 将拦截器应用到 Axios 实例
  }
}

添加拦截器

在 InterceptorManager 类中，我们需要提供 useRequest 和 useResponse 方法来添加请求拦截器和响应拦截器。

useRequest(fulfilled, rejected) {
  this.requestInterceptors.push({ fulfilled, rejected });
  return this; // 返回 this 以实现链式调用
}

useResponse(fulfilled, rejected) {
  this.responseInterceptors.push({ fulfilled, rejected });
  return this; // 返回 this 以实现链式调用
}

应用拦截器

在 InterceptorManager 类中，我们需要提供 applyInterceptors 方法，将所有的拦截器应用到 Axios 实例上。

applyInterceptors(axiosInstance) {
  this.requestInterceptors.forEach(interceptor => {
    axiosInstance.interceptors.request.use(interceptor.fulfilled, interceptor.rejected);
  });

  this.responseInterceptors.forEach(interceptor => {
    axiosInstance.interceptors.response.use(interceptor.fulfilled, interceptor.rejected);
  });
}

链式调用的实现

链式调用的核心在于每个方法都返回 this，这样我们就可以在调用一个方法后继续调用另一个方法。在 InterceptorManager 类中，我们已经通过 useRequest 和 useResponse 方法实现了链式调用。

const interceptorManager = new InterceptorManager()
  .useRequest(config => {
    config.headers['Authorization'] = 'Bearer token';
    return config;
  })
  .useResponse(response => {
    return response.data;
  });

拦截器管理类的完整实现

以下是 InterceptorManager 类的完整实现：

class InterceptorManager {
  constructor() {
    this.requestInterceptors = [];
    this.responseInterceptors = [];
  }

  useRequest(fulfilled, rejected) {
    this.requestInterceptors.push({ fulfilled, rejected });
    return this;
  }

  useResponse(fulfilled, rejected) {
    this.responseInterceptors.push({ fulfilled, rejected });
    return this;
  }

  applyInterceptors(axiosInstance) {
    this.requestInterceptors.forEach(interceptor => {
      axiosInstance.interceptors.request.use(interceptor.fulfilled, interceptor.rejected);
    });

    this.responseInterceptors.forEach(interceptor => {
      axiosInstance.interceptors.response.use(interceptor.fulfilled, interceptor.rejected);
    });
  }
}

使用示例

以下是如何使用 InterceptorManager 类的示例：

import axios from 'axios';
import InterceptorManager from './InterceptorManager';

const axiosInstance = axios.create();

const interceptorManager = new InterceptorManager()
  .useRequest(config => {
    config.headers['Authorization'] = 'Bearer token';
    return config;
  })
  .useResponse(response => {
    return response.data;
  });

interceptorManager.applyInterceptors(axiosInstance);

// 使用 axiosInstance 发送请求
axiosInstance.get('/api/data')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

总结

通过设计一个拦截器管理类，我们可以将所有的拦截器集中管理，并通过链式调用的方式添加拦截器。这种方式不仅使代码更加清晰和易于维护，还提高了代码的可读性和可复用性。在实际项目中，我们可以根据需求扩展 InterceptorManager 类，例如添加移除拦截器的方法、支持批量添加拦截器等，以满足更多的业务需求。