react+ts封装axios

随着前端工程化进一步普及，前端代码规模和复杂度不断提高，前端对于后端API的依赖越来越重要。为了避免重复造轮子和提高开发效率，前端开发中经常会使用第三方HTTP客户端库来封装和管理与后端API的交互。而axios是目前较为流行的HTTP客户端库之一。

在开发中，封装axios是一种较为常见的做法。而在使用TypeScript开发时，通过接口、类型别名等特性，可以进一步提升封装axios的体验和安全性。

以下是在React项目中封装axios的一些思路和示例代码：

1. 安装axios和@types/axios

npm install axios @types/axios

2. 创建axios实例

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

在创建实例时，我们可以配置一些公共选项，如baseURL、timeout、headers等。这样可以避免在每个请求中都重复设置这些选项。

3. 封装请求方法

import { AxiosRequestConfig, AxiosResponse } from 'axios';

interface HttpResponse<T> extends AxiosResponse {
  data: T;
}

interface Options extends AxiosRequestConfig {
  url: string;
}

function request<T = any>(options: Options): Promise<HttpResponse<T>> {
  return instance.request<T>(options).then((response) => response.data);
}

export default request;

在封装请求方法时，我们通过泛型和接口定义了请求响应类型，使得在使用时可以轻松推断出响应数据类型。同时，也提供了options类型，使得使用时更加简洁和直观。

4. 使用示例

import request from './request';

interface User {
  id: number;
  name: string;
  email: string;
}

function getUser(id: number): Promise<User> {
  return request<User>({
    url: `/users/${id}`,
    method: 'get',
  });
}

async function test() {
  const user = await getUser(1);
  console.log(user);
}

test();

在使用封装的axios时，我们只需要按照自己定义的接口类型，传递对应的参数即可。通过这种方式，我们可以大大减少代码中的硬编码和类型错误，提高代码的可读性和健壮性。

总的来说，封装axios是React项目中的一项常见工作，使用TypeScript可以进一步提升封装的体验和质量。在实践中，我们可以根据具体场景灵活运用接口、类型别名、泛型等特性，来构建出更符合自己项目需要的axios封装方案。