AJAX 请求数据

在 Web 开发中，经常需要通过 AJAX 请求获取数据，然后将数据展示在页面上。在 React 应用中，我们可以使用 fetch 或者第三方库如 axios 来发送 AJAX 请求。

通过 fetch 发送 AJAX 请求

fetch 是浏览器内置的 API，用于发送网络请求。我们可以使用 fetch 发送 GET、POST 等不同类型的请求，并且可以设置请求头、请求参数等。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在上面的示例中，我们通过 fetch 发送了一个 GET 请求，并且使用 .then() 方法处理响应数据。首先将响应数据转换为 JSON 格式，然后在第二个 .then() 中处理获取到的数据。如果请求出现错误，可以通过 .catch() 方法捕获并处理错误。

通过 axios 发送 AJAX 请求

除了使用原生的 fetch 方法，我们还可以使用第三方库 axios 来发送 AJAX 请求。axios 提供了更加简洁和易用的 API，同时还支持拦截器、取消请求等功能。

首先需要安装 axios：

npm install axios

然后在 React 组件中使用 axios 发送请求：

// www.javascriptcn.com code example
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在上面的示例中，我们通过 axios 发送了一个 GET 请求，并且使用 .then() 方法处理响应数据。和 fetch 类似，可以在 .catch() 中处理错误情况。

通过以上两种方法，我们可以方便地在 React 应用中发送 AJAX 请求，并且获取数据进行展示。