react 封装axios ts

在React中封装axios的typescript代码可以按照以下步骤进行：

1. 首先，创建一个名为`api.ts`的文件，用于存放所有的API请求。
2. 导入`axios`和其他必要的依赖项。
3. 创建一个`http`函数，用于发送请求并返回一个Promise对象。
4. 在`http`函数中，对axios请求进行拦截，可以实现添加公共请求头、token验证等操作。你可以使用axios的`interceptors`来实现拦截器功能。
5. 创建一个具体的请求函数，例如`getArticleList`，在该函数中使用`http`函数发送请求。
6. 在需要使用API的组件中，导入相应的请求函数并调用。

以下是一个示例的代码：

// api.ts
import axios from 'axios';

const instance = axios.create({
 baseURL: 'https://api.example.com', // 设置API的基础URL
});

instance.interceptors.request.use((config) => {
  // 在请求发送前进行一些操作，例如添加公共请求头、token验证等
  return config;
}, (error) => {
  return Promise.reject(error);
});

function http(method: string, url: string, data?: any) {
  // 发送请求的函数
  return instance.request({
    method,
    url,
    data,
  });
}

function getArticleList() {
  // 获取文章列表的请求函数
  return http('get', '/article/home/index');
}

export {
  getArticleList,
};

在组件中使用封装好的API请求函数的示例如下：

// Home.tsx
import React, { useEffect } from 'react';
import { getArticleList } from '~/api/blog';

const Home: React.FC = () => {
  useEffect(() => {
    getArticleList()
      .then((res) => {
        console.log('get article response:', res);
      })
      .catch((error) => {
        console.log('get response failed:', error);
      });
  }, []);

  return (
    // 组件的其他内容
  );
};

export default Home;

通过上述步骤，你可以在React中封装并使用axios的typescript代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [react + ts or vue + ts 通用axios封装的方法。 ](https://download.csdn.net/download/qq_40661003/86247561)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [【重点突破】—— React应用中封装axios(转)](https://blog.csdn.net/qq_34235864/article/details/113805369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]