React AJAX

在 React 应用中实现 AJAX 请求,通常可以使用 fetch API 或者第三方库如 axios、jquery 等库来进行网络请求。

使用 fetch API 进行 AJAX 请求

 浏览器中内置的 API

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

    fetchData();
  }, []);

使用 axios

 axios 是一个基于 Promise 的 HTTP 客户端,适用于浏览器和 Node.js。

1.安装axios:npm install axios

2.引入axios:import axios from 'axios'

3.发起请求

4.处理响应和错误状态

5.更新状态

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

    fetchData();
  }, []);

 

你可能感兴趣的:(react.js,ajax,前端)