React AJAX

简介: 10月更文挑战第10天

在 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 钩子来存储请求的数据,并在请求成功后更新状态。

实例

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。

npm install axios

  1. 引入 axios - 在组件中引入 axios。
  2. 发起请求 - 使用 axios 发起 GET 或 POST 请求。
  3. 处理响应和错误 - 使用 .then().catch() 来处理响应和捕获错误。
  4. 更新状态 - 与使用 fetch 类似,使用 useState 更新状态。

实例

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 来取消未完成的请求。

React 实例

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" />);


尝试一下 »

目录
相关文章
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
51 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
31 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON 前端开发 JavaScript
06_React ajax
06_React ajax
13 0
|
6月前
|
存储 前端开发
|
前端开发 CDN
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
315 0
【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
65 1
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
66 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
135 0
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
44 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
31 0