axios封装react

Axios 是一个流行的 JavaScript 库，用于处理 HTTP 请求。在 React 中将其封装起来是为了简化组件间的通信以及异步数据获取。通过封装 Axios，可以创建一个自定义的 API 接口层，让React 组件无需关心底层的网络请求细节。

以下是一个简单的 Axios 封装示例：

import axios from 'axios';

const apiClient = {
  get(url) {
    return axios.get(url)
      .then(response => response.data)
      .catch(error => {
        console.error('Error fetching data:', error);
        throw error;
      });
  },
  post(url, data) {
    return axios.post(url, data)
      .then(response => response.data)
      .catch(error => {
        console.error('Error posting data:', error);
        throw error;
      });
  },
  // ...添加其他HTTP方法如put, delete等
};

export default apiClient;

// 在组件内部调用
componentDidMount() {
  apiClient.get('/api/users')
    .then(data => this.setState({ users: data }));
}

在这个例子中，`apiClient` 对象包含了 `get` 和 `post` 方法，它们分别对应 HTTP 的 GET 和 POST 请求。React 组件可以直接使用这些方法来获取或发送数据，API 错误也被处理并适当地记录或抛出。