typescript axios AxiosInterceptorManager

原创

mob64ca12d8821d 2024-08-28 06:27:02 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d8821d的原创作品，请联系作者获取转载授权，否则将追究法律责任

深入理解 TypeScript 中的 Axios 拦截器

在现代的 Web 开发中，HTTP 请求是应用与服务器之间进行数据交流的重要工具。Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js。本文将会深入探讨 Axios 的拦截器（interceptors），并通过 TypeScript 来实现一些示例。

什么是 Axios 拦截器？

Axios 拦截器允许我们在请求或响应被处理之前进行一些自定义操作。通常，这些自定义操作包括请求的修改、添加认证信息、对响应数据的处理、错误处理等。这使得我们的代码更加灵活和可维护。

Axios 拦截器的类型

请求拦截器：在请求被发送之前，可以对请求进行处理。
响应拦截器：在接收到响应之后，可以对响应数据进行处理。

在 TypeScript 中使用 Axios 拦截器

首先，我们需要安装 Axios。可以利用 npm 或 yarn：

npm install axios

接下来，让我们用一个简单的示例来展示如何使用 Axios 拦截器。

示例代码

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 创建 Axios 实例
const instance = axios.create({
    baseURL: '
    timeout: 1000,
});

// 添加请求拦截器
instance.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        // 在发送请求之前做些什么，比如添加认证信息
        config.headers['Authorization'] = 'Bearer YOUR_TOKEN';
        console.log('Request Interceptor:', config);
        return config;
    },
    (error) => {
        // 处理请求错误
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    (response: AxiosResponse) => {
        // 对响应数据做些什么
        console.log('Response Interceptor:', response);
        return response.data;  // 返回数据
    },
    (error) => {
        // 处理响应错误
        console.error('Response Error:', error);
        return Promise.reject(error);
    }
);

// 发起请求
async function fetchData() {
    try {
        const data = await instance.get('/endpoint');
        console.log('Fetched Data:', data);
    } catch (error) {
        console.error('Fetch Error:', error);
    }
}

// 调用函数
fetchData();

在上述代码中，我们首先创建了一个 Axios 实例 instance。接着，我们定义了请求和响应的拦截器。请求拦截器中，我们在请求头中添加了一个假设的认证 Token。在响应拦截器中，我们对返回的数据进行了处理，并将其打印到控制台。

旅行图示例

在这里，我们将用 mermaid 语法来描述一个用户在进行 API 调用过程中的旅行图。定义用户的旅程可以帮助我们理解请求和响应的过程。

journey
    title API 调用旅程
    section 用户请求
      用户发出请求: 5: 用户
      请求被请求拦截器处理: 5: 应用
    section 服务器处理
      服务器处理请求: 5: 服务器
      生成响应: 5: 服务器
    section 用户收到响应
      响应被响应拦截器处理: 5: 应用
      用户收到响应数据: 5: 用户

类图示例

接下来，我们使用 mermaid 的 classDiagram 来展示 Axios 拦截器的类结构。

classDiagram
    class Axios {
      +create(config: AxiosRequestConfig)
      +interceptors: AxiosInterceptorManager
    }

    class AxiosInterceptorManager {
      +use(fulfilled: Function, rejected: Function)
      +eject(id: Number)
    }

    class AxiosRequestConfig {
      +url: String
      +method: String
      +headers: Object
      +timeout: Number
    }

    class AxiosResponse {
      +data: Any
      +status: Number
      +statusText: String
      +config: AxiosRequestConfig
    }

通过上述类图，我们可以看到 Axios、拦截器管理器、请求配置和响应的关系。这些构件共同协作，使得 Axios 能够高效地处理 HTTP 请求和响应。