一切福田，不離方寸，從心而覓，感無不通。

React AJAX

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

以下是使用这两种方法的基本说明：

使用 fetch API 进行 AJAX 请求

fetch 是一个在浏览器中内置的 API，用于发起网络请求。以下是使用 fetch 在 React 组件中发起 AJAX 请求的基本步骤：

  • 引入 fetch – 如果你使用的是现代浏览器，通常不需要引入 fetch。但是，如果你需要支持旧浏览器，可以使用 unfetch 这样的 polyfill。
  • 使用 useEffect 钩子 – 利用 useEffect 钩子来处理副作用，比如发起网络请求。
  • 发起请求 – 使用 fetch 发起 GET 或 POST 请求。
  • 处理响应 – 使用 .then() 来处理响应数据。
  • 错误处理 – 使用 .catch() 来捕获并处理错误。
  • 更新状态 – 使用 useState 钩子来存储请求的数据，并在请求成功后更新状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { useState, useEffect } from 'react';
 
const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
 
  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();
  }, []);
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>Data from API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};
 
export default MyComponent;

说明：

  • useState 和 useEffect：使用 useState 来存储 AJAX 请求返回的数据 (data) 和加载状态 (loading)，并使用 useEffect 在组件加载后执行 AJAX 请求。
  • fetch：使用 fetch 发起 GET 请求，并使用 response.json() 将返回的 JSON 数据解析为 JavaScript 对象。
  • 异步处理：使用 async/await 来处理异步操作，确保在请求完成后更新状态。
  • 错误处理：在 fetch 请求中使用 try/catch 来捕获和处理可能发生的错误。

使用 axios

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

以下是使用 axios 的基本步骤：

  1. 安装 axios – 通过 npm 或 yarn 安装 axios。
    1
    npm install axios
  2. 引入 axios – 在组件中引入 axios。
  3. 发起请求 – 使用 axios 发起 GET 或 POST 请求。
  4. 处理响应和错误 – 使用 .then() 和 .catch() 来处理响应和捕获错误。
  5. 更新状态 – 与使用 fetch 类似，使用 useState 更新状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
 
  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();
  }, []);
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>Data from API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};
 
export default MyComponent;

使用 jQuery 在线测试

以下实例演示了获取 Github 用户最新 gist 共享描述:

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: '', lastGistUrl: ''};
  }
  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }
  componentWillUnmount() {
    this.serverRequest.abort();
  }
  render() {
    return (
      <div>
        {this.state.username} 用户最新的 Gist 共享地址：
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />
);

以上代码使用 jQuery 完成 Ajax 请求。

 

from:https://www.runoob.com/react/react-ajax.html

Copyright © 2024 Longsheng All rights reserved