ts+axios 定义接口返回值的类型

Z_Wonderful

已于 2022-11-15 13:59:29 修改

阅读量7.4k

点赞数 2

分类专栏： TypeScript # react hooks 文章标签：前端 typescript react.js

于 2022-11-15 13:48:54 首次发布

本文链接：https://blog.youkuaiyun.com/Z_Wonderful/article/details/127862667

版权

react hooks 同时被 2 个专栏收录

23 篇文章

订阅专栏

TypeScript

7 篇文章

订阅专栏

该博客介绍了如何在TypeScript中利用Axios进行HTTP请求，并通过Promise定义自定义类型来匹配接口返回的数据结构。具体示例展示了如何为GET请求创建公用函数，以及如何为特定接口`GetData`定义响应类型`Response<Value>`，确保类型安全。内容涵盖了错误处理、接口参数和数据结构的详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

我尝试去定义 Promise<自定义>里的自定义的类型，希望与数据接口返回的类型一致。目的是希望类型定义好之后可以不用去看文档也能知道这个接口返回的是哪些数据

描述

Axios 是一个基于 promise 的 HTTP 库:
需要使用Promise< 自定义>

公用get请求

/**
 * 公用get请求
 * @param url       接口地址
 * @param msg       接口异常提示
 * @param headers   接口所需header配置
 */
export const get = ({ url, msg = '接口异常', config }: IFRequestParam) => {
  axios.defaults.headers.common['Authorization'] = umbrella.getLocalStorage('user_token');
  return axios
    .get(url, config)
    .then((res) => {
      return res.data;
    })
    .catch((err) => {
      if (err.response && err.response.data.statusCode === '401) {
        // message.warn('请先登录');
        window.location.href = '/';
      } else if (!err.response || !err.response.data) {
        message.error(`API Server ${err.toString()}`);
        return;
      }
      if (err.response.status !== 200) {
        message.error(err.response.data.message || msg);
        return err.response.data;
      }
      message.error(err.response.data.message || msg);
    });
};

接口实例：

接口：http://10.0.1.1/GetData

参数：

参数	类型
statusCode	number
message	string
value	Array< >

//类型
type ID = string;

interface ResponseOriginal<T> {
  statusCode?: number;
  message?: string;
  value: T;
}
type Response<T> = ResponseOriginal<T> | undefined;
//value
interface Value{
  item1: {name:string | null,num:number};
  item2: ArrayValueItem3 [];
  item3: any[];  //或any一步到位....
  }
interface ArrayValueItem3 {
  key:number | string,
  id:string,
  label:string
}

//接口
export const GetData = (
  id: ID
): Promise<Response<Value>> =>   //或Promise<Response<any>>不过这样未知value里面的数据
  get({
    url: `${http://10.0.1.1}/GetData`,
    config: { params: { id } },
  });