axios攔截器管理類鏈式調用怎么實現

Axios攔截器管理類鏈式調用怎么實現

目錄

1. 引言
2. Axios攔截器簡介
3. 攔截器的基本使用
4. 攔截器管理類的設計
5. 鏈式調用的實現
6. 攔截器管理類的完整實現
7. 使用示例
8. 總結

引言

在現代前端開發中，網絡請求是不可或缺的一部分。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 類，例如添加移除攔截器的方法、支持批量添加攔截器等，以滿足更多的業務需求。