react中如何使用ajax

在React中使用AJAX

React本身不提供AJAX功能，但可以通过以下几种方式实现AJAX请求：

使用原生fetch API

fetch是现代浏览器内置的API，无需额外安装库即可使用：

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

在React组件中使用时，通常结合useEffect：

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data))
      .catch(err => console.error(err));
  }, []);

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

使用axios库

axios是一个流行的HTTP客户端，提供更简洁的API和更好的错误处理：

安装axios：

npm install axios

使用示例：

import axios from 'axios';

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

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

  // 渲染逻辑
}

使用async/await语法

现代JavaScript支持async/await，使异步代码更易读：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

在React组件中的应用：

useEffect(() => {
  async function loadData() {
    const result = await axios.get('https://api.example.com/data');
    setData(result.data);
  }
  loadData();
}, []);

处理加载和错误状态

良好的用户体验应包含加载状态和错误处理：

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <div>{/* 渲染数据 */}</div>;
}

取消请求

避免组件卸载后仍更新状态的潜在内存泄漏：

useEffect(() => {
  const controller = new AbortController();

  fetch('https://api.example.com/data', { signal: controller.signal })
    .then(/* ... */)
    .catch(err => {
      if (err.name === 'AbortError') {
        console.log('Request was aborted');
      }
    });

  return () => controller.abort();
}, []);

对于axios：

useEffect(() => {
  const source = axios.CancelToken.source();

  axios.get('https://api.example.com/data', {
    cancelToken: source.token
  }).then(/* ... */).catch(err => {
    if (axios.isCancel(err)) {
      console.log('Request canceled', err.message);
    }
  });

  return () => source.cancel('Component unmounted');
}, []);