使用axios - ReactJS从REST端点获取JSON

基础概念

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。ReactJS 是一个用于构建用户界面的 JavaScript 库。结合使用 Axios 和 ReactJS 可以方便地从 RESTful API 获取 JSON 数据并更新 UI。

优势

简单易用：Axios 的 API 设计简洁，易于上手。
支持浏览器和 Node.js：Axios 可以在浏览器和 Node.js 环境中使用。
拦截请求和响应：可以方便地添加拦截器来处理请求和响应。
自动转换 JSON 数据：Axios 会自动将响应数据转换为 JSON 格式。
取消请求：可以轻松地取消正在进行的请求。

类型

Axios 支持多种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。

应用场景

适用于需要从后端 API 获取数据并在前端展示的场景，例如获取用户列表、商品信息等。

示例代码

以下是一个使用 Axios 和 ReactJS 从 REST 端点获取 JSON 数据的示例：

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

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await axios.get('https://api.example.com/data');
        setData(result.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

可能遇到的问题及解决方法

跨域问题：
- 问题：浏览器出于安全考虑，可能会阻止跨域请求。
- 解决方法：在服务器端设置 CORS（跨域资源共享）头，或者使用代理服务器。

请求超时：
- 问题：请求在指定时间内未完成。
- 解决方法：设置 Axios 请求的超时时间，例如 axios.get(url, { timeout: 5000 })。
请求被取消：
- 问题：请求在完成前被取消。
- 解决方法：使用 Axios 的取消令牌（CancelToken）来取消请求。