React+TS中axios网络请求以及利用Promise封装多个网络请求

在React+TS项目中，可以使用axios库来进行网络请求，并且可以通过Promise来封装多个网络请求。以下是一个简单的例子：

首先安装axios：

npm install axios

然后，创建一个封装网络请求的service.ts文件：

import axios, { AxiosRequestConfig } from 'axios';
 
// 封装get请求
export const getRequest = (url: string, config?: AxiosRequestConfig) => {
  return axios.get(url, config);
};
 
// 封装post请求
export const postRequest = (url: string, data: any, config?: AxiosRequestConfig) => {
  return axios.post(url, data, config);
};
 
// 封装多个请求
export const fetchData = () => {
  const request1 = getRequest('https://api.example.com/data1');
  const request2 = postRequest('https://api.example.com/data2', { key: 'value' });
  return Promise.all([request1, request2]);
};

在React组件中使用封装的网络请求：

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';
 
const MyComponent: React.FC = () => {
  const [data1, setData1] = useState({});
  const [data2, setData2] = useState({});
 
  useEffect(() => {
    fetchData().then(responses => {
      setData1(responses[0].data);
      setData2(responses[1].data);
    }).catch(error => {
      // 处理错误
      console.error('An error occurred:', error);
    });
  }, []);
 
  return (
    <div>
      <div>{JSON.stringify(data1)}</div>
      <div>{JSON.stringify(data2)}</div>
    </div>
  );
};
 
export default MyComponent;

在这个例子中，fetchData函数封装了两个网络请求，并且返回一个Promise.all的结果，它会在所有的请求都完成后解决，传递所有响应作为数组。在React组件中，我们使用useEffect来进行异步请求，并通过useState来管理响应数据。