流程图如下所示:

flowchart TD
    A(开始) --> B(创建axios实例)
    B --> C(请求拦截器)
    C --> D(设置请求头)
    D --> E(发送请求)
    E --> F(响应拦截器)
    F --> G(处理响应结果)
    G --> H(返回结果)
    H --> I(结束)

文章如下:

ts封装axios 请求拦截器AxiosRequestConfig报错解决方法

一、背景介绍

在前端开发过程中,我们经常会使用到网络请求来获取数据。而axios是一款非常常用的网络请求库,它具有简洁的API、良好的兼容性和可扩展性,被广泛应用于各类前端项目中。

在使用axios的过程中,我们常常需要对请求进行一些统一处理,比如添加请求头、处理请求错误等。这些处理可以通过axios提供的请求拦截器和响应拦截器来实现。

本文将向你展示如何使用typescript封装axios,并在封装过程中解决AxiosRequestConfig报错的问题。

二、解决方案

1. 创建axios实例

首先,我们需要创建一个axios实例,代码如下:

import axios, { AxiosInstance } from 'axios';

const instance: AxiosInstance = axios.create({
  // 配置项
});

在上述代码中,我们导入了axios和AxiosInstance两个类型。AxiosInstance是一个泛型接口,用于规定axios实例的类型。通过axios.create()方法可以创建一个axios实例,并将其赋值给instance变量。

2. 请求拦截器

接下来,我们需要编写请求拦截器代码,用于在每次请求之前进行一些处理。代码如下:

instance.interceptors.request.use(
  (config) => {
    // 处理请求前的逻辑
    return config;
  },
  (error) => {
    // 处理请求错误的逻辑
    return Promise.reject(error);
  }
);

上述代码中,我们使用instance.interceptors.request.use()方法注册了一个请求拦截器。该方法接收两个参数,第一个参数是一个回调函数,用于处理请求前的逻辑;第二个参数是一个回调函数,用于处理请求错误的逻辑。

3. 设置请求头

在请求拦截器中,我们可以通过修改config对象来实现一些特定的处理。比如,我们可以在请求头中添加一些自定义的信息。代码如下:

instance.interceptors.request.use(
  (config) => {
    // 添加自定义请求头
    config.headers['Authorization'] = 'Bearer token';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

上述代码中,我们通过修改config.headers对象来添加了一个名为Authorization的请求头,并将其值设置为Bearer token。

4. 发送请求

在完成请求拦截器的处理后,我们可以通过调用axios实例的请求方法来发送请求。代码如下:

instance.get('/api/data')
  .then((response) => {
    // 处理响应结果
  })
  .catch((error) => {
    // 处理请求错误
  });

上述代码中,我们使用instance.get()方法发送了一个GET请求,并在.then()和.catch()方法中处理响应结果和请求错误。

5. 响应拦截器

最后,我们可以编写响应拦截器代码,用于在每次获取到响应后进行一些处理。代码如下:

instance.interceptors.response.use(
  (response) => {
    // 处理响应结果的逻辑
    return response;
  },
  (error) => {
    // 处理响应错误的逻辑
    return Promise.reject(error);
  }
);

上述代码中,我们使用instance.interceptors.response.use()方法注册了一个响应拦截器。该方法接收两个参数,第一个参数是一个回调函数,用于处理响应结果的逻辑;第二个参数是一个回调函数,用于处理响应错误的逻辑。

6. 返回结果

在响应拦截器中,我们可以通过修改response对象来实现一些