博客

Typescript 封装 Axios拦截器方法实例

  • Post category:http

下面我为您详细讲解“Typescript 封装 Axios 拦截器方法实例”的完整攻略。

1. 简介

在现代的 Web 开发中，使用 Ajax 发送请求是非常常见的。而 Axios 是一个基于 Promise 的 HTTP 库，我们可以使用它来发送 Ajax 请求，并进行拦截、转换请求、响应数据等操作。对于 Axios 的使用，一般都会进行一定程度的封装，把一些公共的逻辑封装到一个公共的位置，这样可以避免重复的代码，并提高代码的可维护性。

在本攻略中，我们将使用 Typescript 来封装 Axios 的拦截器方法，并提供两个示例。

2. 实战

2.1 安装 Axios

在进行实际操作之前，我们需要先安装 Axios。可以使用 npm 来安装，命令如下：

npm install axios

2.2 创建 Axios 实例

我们可以使用 Axios.create 方法来创建一个 Axios 实例，这个实例可以设置一些默认的配置项，比如 baseURL、timeout 等。示例代码如下：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

const instance: AxiosInstance = axios.create({
  baseURL: "https://api.example.com/",
  timeout: 1000,
});

export default instance;

上面的代码中，我们使用了一个名为 instance 的变量来保存创建的 Axios 实例，并设置 baseURL 和 timeout 两个默认配置项。需要注意的是，Axios.create 方法返回的是一个 AxiosInstance 类型的对象。

2.3 封装 Axios 拦截器

在进行 Ajax 请求时，我们可能需要做一些公共的处理，比如在请求头中添加一些默认的参数、在响应数据中处理一些通用的逻辑等。这时候，我们就可以使用 Axios 的拦截器来实现这些功能。下面是一个封装了 Axios 拦截器的例子：

import instance from "./axios";

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求头中添加一些默认的参数
    config.headers.Authorization = "Bearer xxxxxxxx";
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 在响应数据中处理一些通用的逻辑
    if (response.data.code === 0) {
      return response.data.data;
    } else {
      return Promise.reject(response.data.message);
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

上面的代码中，我们先导入了我们创建的 Axios 实例（instance），然后使用 instance.interceptors.request.use 方法来添加一个请求拦截器，在请求头中添加了一个 Authorization 参数。接着，我们再使用 instance.interceptors.response.use 方法来添加一个响应拦截器，处理了一些通用的逻辑。

需要注意的是，Axios 的拦截器返回的是一个 promise 对象。

2.4 使用封装后的 Axios 实例

在封装完成之后，我们就可以使用封装后的 Axios 实例来发送请求了。示例代码如下：

import axiosInstance from "./axiosInterceptors";

interface IResponseData {
  code: number;
  message: string;
  data: any;
}

// 发送 GET 请求
const getData = (): Promise<IResponseData> => {
  return axiosInstance.get("/api/data");
};

// 发送 POST 请求
const postData = (data: any): Promise<IResponseData> => {
  return axiosInstance.post("/api/data", data);
};

上面的代码中，我们分别定义了一个 getData 和 postData 方法来发送 GET 和 POST 请求。需要注意的是，这两个方法返回的都是一个 Promise 对象，我们可以使用 async/await 或 then/catch 方法来获取响应数据。

3. 总结

本攻略针对 Typescript 封装 Axios 拦截器方法进行了详细讲解，介绍了 Axios 的创建实例、拦截器封装和使用方法。希望对大家有所帮助。

Tags: