React 中的 Axios：初学者指南

在 React 中，我们经常需要和服务器进行数据交互。Axios 是一个常用的 JavaScript 库，用于发送 HTTP 请求和处理响应。

本指南将介绍如何在 React 中使用 Axios，包括安装和基本用法。

安装

1. 首先，进入你的 React 项目目录，打开终端，输入以下命令来安装 Axios：

npm install axios --save

2. 安装成功后，在你的 React 组件中引入 Axios：

import axios from 'axios';

基本用法

发送 GET 请求

使用 Axios 发送 GET 请求非常简单。例如，下面的代码将向一个 URL 发送 GET 请求，并在响应成功后获取数据：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在这里，我们使用了 then 方法来处理成功的响应并获取数据，使用 catch 方法来处理错误。

发送 POST 请求

发送 POST 请求也很简单。例如，下面的代码将向一个 URL 发送一个对象，并在响应成功后获取数据：

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在这里，我们向 post 方法中传递了一个对象，它包含了我们要发送的数据。响应成功后，我们可以通过 response.data 获取服务器返回的数据。

发送并发请求

Axios 也支持发送并发请求。例如，下面的代码将同时向两个 URL 发送请求，并在所有请求结束后获取数据：

axios.all([
    axios.get('https://jsonplaceholder.typicode.com/posts'),
    axios.get('https://jsonplaceholder.typicode.com/comments')
  ])
  .then(responseArr => {
    console.log(responseArr[0].data);
    console.log(responseArr[1].data);
  })
  .catch(error => {
    console.log(error);
  });

在这里，我们使用了 axios.all 方法来发送并发请求，它接受一个包含多个 Axios 请求的数组，并在所有请求结束后返回一个响应数组。

设置 Axios 实例

有时，我们需要在多个组件之间共享 Axios 实例。例如，在 Vuex 或 Redux 中，我们可能希望使用相同的 Axios 实例。此时，我们可以创建一个 Axios 实例并在多个组件中使用它。

下面的代码演示了如何创建一个 Axios 实例并设置公共参数：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

在这里，我们使用了 axios.create 方法来创建一个 Axios 实例，设置了 baseURL、timeout 和 headers 这些公共参数，并将这个实例导出。在需要使用 Axios 的组件中，我们可以引入这个实例并使用它：

import axios from './axios-instance';

axios.get('/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

在这里，我们引入了我们创建的 Axios 实例，并使用它来发送 GET 请求。

结论

在本文中，我们介绍了如何在 React 中使用 Axios 发送 HTTP 请求。Axios 具有许多高级功能，例如拦截请求、设置请求头、使用 URL 参数等，读者可以在官方文档中了解更多。