TypeScript封装axios——基本封装与拦截器精细控制

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
// 基础请求配置
const BASE_CONFIG: AxiosRequestConfig = {
  baseURL: 'https://api.example.com',
  timeout: 10000,
  // 其他配置...
};
 
// 创建axios实例
const instance = axios.create(BASE_CONFIG);
 
// 请求拦截器
instance.interceptors.request.use(
  function (config: AxiosRequestConfig) {
    // 在发送请求前做些什么
    // 例如，添加token
    const token = 'your-token';
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  function (error: any) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
 
// 响应拦截器
instance.interceptors.response.use(
  function (response: AxiosResponse) {
    // 对响应数据做点什么
    return response.data;
  },
  function (error: any) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
 
// 使用封装的axios实例发送请求
instance.get('/endpoint').then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这个代码示例展示了如何使用TypeScript对axios进行基础封装，包括创建带有基础配置的axios实例，以及如何添加请求和响应拦截器来进一步控制请求和响应。最后，我们通过实例化的axios实例发送了一个GET请求。