axios ts 拦截参数config隐式具有any类型

原创

mob649e8154b5bf 2024-06-20 06:26:14 ©著作权

文章标签 ios 拦截器 typescript 文章分类 iOS 移动开发

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

如何实现“axios ts 拦截参数config隐式具有any类型”

流程图

flowchart TD
    A(创建axios实例) --> B(添加请求拦截器)
    B --> C(处理config参数)
    C --> D(发送请求)
    D --> E(添加响应拦截器)

步骤表格

步骤	操作
创建axios实例	创建一个axios实例，并配置基本参数
添加请求拦截器	在axios实例上添加请求拦截器
处理config参数	在请求拦截器中处理config参数
发送请求	发送经过处理后的请求
添加响应拦截器	在axios实例上添加响应拦截器

具体操作步骤

1. 创建axios实例

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

const instance: AxiosInstance = axios.create({
  baseURL: '
});

在这里，我们使用axios的create方法创建了一个axios实例instance，并配置了基本的baseURL参数。

2. 添加请求拦截器

instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在这里处理config参数
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

通过interceptors.request.use方法，我们可以在发送请求前对请求进行拦截和处理。在这里，我们将config参数传入一个处理函数中，并在函数内对config参数进行处理。

3. 处理config参数

instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在这里处理config参数
    config.headers['Authorization'] = 'Bearer token';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在这里，我们对config参数进行了处理，例如在headers中添加了Authorization字段，并赋予了一个token值。

4. 发送请求

instance.get('/api/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

通过调用axios实例的get方法发送请求，会经过请求拦截器处理后再发送。

5. 添加响应拦截器

instance.interceptors.response.use(
  (response) => {
    // 在这里处理响应数据
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

通过interceptors.response.use方法，我们可以在获取到响应后对响应数据进行拦截和处理。