如何在react封装axios

在 React 中封装 Axios 可以帮助我们在项目中更方便地使用 Axios 进行数据请求。以下是一个简单的封装示例：

1. 创建一个 axios.js 文件，代码如下：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000,
});

instance.interceptors.request.use(
  (config) => {
    // 在请求发送前做些什么
    return config;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    // 在这里对返回的数据进行处理
    return response.data;
  },
  (error) => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default instance;

2. 在组件中使用：

import React, { useEffect, useState } from 'react';
import axios from './axios';

function Example() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/data')
      .then((response) => {
        setData(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default Example;

在上面的示例中，我们首先创建了一个 Axios 实例，并添加了请求和响应拦截器。然后在组件中使用这个实例来发送请求。由于我们使用了拦截器，所以返回的数据会被拦截器处理后再传递给组件。这样就可以在项目中更方便地使用 Axios 进行数据请求了。