使用ts axios在拦截器中定义接口返回数据类型

在使用 TypeScript 结合 axios 进行网络请求时，我们通常会定义接口来规范返回的数据类型。如果在 axios 的拦截器中只返回 data，我们可以通过一些技巧来定义接口返回数据类型。

1. 创建接口

首先，我们需要创建一个接口来定义返回数据的结构。假设我们的返回数据包含 code 和 data 两个字段，我们可以创建如下接口：

interface ResponseData {
  code: number;
  data: any;
}

2. 设置拦截器

接下来，我们可以在 axios 的拦截器中对返回的数据进行处理，并将其转换成我们定义的接口类型。以下是一个示例代码：

import axios, { AxiosResponse } from 'axios';

axios.interceptors.response.use((response: AxiosResponse) => {
  // 只返回 data
  return response.data;
}, (error) => {
  return Promise.reject(error);
});

3. 使用接口

现在，我们可以在发送网络请求时使用我们定义的接口来规范返回数据的类型。例如：

axios.get<ResponseData>('/api/data').then((response) => {
  console.log(response.code);
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});

关系图

erDiagram
    RESPONSE {
        code INT
        data VARCHAR
    }

类图

classDiagram
    class ResponseData {
        code: number
        data: any
    }

通过以上步骤，我们可以在 ts axios 中拦截器中只返回 data 的情况下，定义接口返回数据类型，并且在代码中使用这个接口来规范返回数据的结构。这样可以提高代码的可维护性和可读性，同时降低出错的可能性。希望以上内容能够帮助到你！