当前位置：首页 > React

react如何实现ajax

2026-02-26 04:49:39React

使用 Fetch API 实现 AJAX

Fetch API 是现代浏览器原生支持的 AJAX 方法，无需额外依赖库。React 中可以直接使用 fetch 进行数据请求。

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

使用 Axios 库实现 AJAX

Axios 是流行的第三方 HTTP 客户端，提供更简洁的 API 和错误处理机制。

import axios from 'axios';

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

在 useEffect 中发起请求

React 推荐在 useEffect 钩子中执行副作用操作（如数据请求），避免阻塞渲染。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []); // 空依赖数组表示仅执行一次
}

处理加载和错误状态

完善的数据请求通常需要处理加载状态和错误反馈。

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => {
        if (!res.ok) throw new Error('Network response was not ok');
        return res.json();
      })
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);
}

使用 async/await 语法

ES7 的 async/await 可以让异步代码更易读。

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

自定义 Hook 封装

对于需要复用的请求逻辑，可以封装成自定义 Hook。

react如何实现ajax

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}