Typescript封装Axios——响应结果的类型处理

import axios, { AxiosResponse } from 'axios';
import { cloneDeep } from 'lodash';
 
// 定义响应类型
export interface ResponseData<T = any> {
  code: number;
  message: string;
  data: T;
}
 
// 封装axios，处理响应结果
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
service.interceptors.response.use(
  <T = any>(response: AxiosResponse<ResponseData<T>>): ResponseData<T> => {
    const res = cloneDeep(response.data);
    // 如果code不是200，则判定为错误，可以进行更复杂的错误处理
    if (res.code !== 200) {
      // 处理错误，例如抛出错误，或者返回错误信息
      console.error('Backend error:', res.message);
      // 可以在此处添加更多的错误处理逻辑
      // ...
      // 最后抛出错误
      // throw new Error(res.message);
    } else {
      return res;
    }
  },
  error => {
    console.error('Network error:', error); // for debug
    // 网络错误处理
    // ...
    return Promise.reject(error);
  }
);
 
export default service;

这个代码实例展示了如何在TypeScript中使用axios创建一个封装过的HTTP客户端，并在响应拦截器中处理响应结果。它定义了响应类型ResponseData，并在响应被拦截时进行了类型检查和错误处理。这是一个简化的例子，实际应用中可能需要更复杂的错误处理和数据结构处理。