JavaScript Async & Await – React 03

React03-Javascript-Async-Await

欢迎来到 React Vernacular Campaign 系列的第三部分,我们将深入探讨 JavaScript 中的异步操作,并介绍两个重要的关键字:Async 和 Await。在本文中,我们将通过实际示例演示异步操作的概念,以及如何使用 Promise、Fetch、Async 和 Await 更有效地处理异步代码。

序言

异步操作在现代网络开发中变得越来越重要。本文将从基本概念入手,讨论异步操作的原理以及如何使用高级 JavaScript 语法处理异步情况。

本篇文章介绍异步 JavaScript

  1. 非同步
  2. Promise & Fetch
  3. Async & Await
  4. 建構Promise 物件
以上中文翻译基于 MDN 官方翻译,如有错误,欢迎读者留言。

异步

异步是开发中的一个基本概念,在以前的代码中,异步目前是一个同步概念,即程序将按顺序运行。

但是,在开发网页的过程中,有时需要执行异步操作,例如:用户点击下面的表单发送时,我们必须等待数据传输结束,并让服务器返回数据才能知道是否成功。

在服务器返回结果之前,直接通过 JavaScript 运行屏幕的成功或失败是错误的。

现代 JavaScript 中还有一些处理异步执行的语法,包括 Promise 和 Async & Await,接下来将对它们进行介绍。


Promise & Fetch

Promise

异步请求通常有成功和失败两种结果,但实际上有三种状态:已完成、已拒绝和待处理。Promise 对象可以清楚地说明非同步请求在执行时的当前状态。

Fetch

在使用 fetch 函数之前,获取 API 数据相当麻烦,可能需要 20 多行代码。不过,ECMA 增加了 fetch 语法,使其更加方便,只需几行代码就能完成 "获取 API "数据。

直接用 api 实例做例子,这边上网找免费 api

https://api.thecatapi.com/v1/images/search

如果读者直接在浏览器中输入,就会看到一个包含 id、url、宽度、高度等信息的返回对象。

如何使用代码获取 api 数据?

 
				
					fetch("https://api.thecatapi.com/v1/images/search") .then(res=>res.json) .then(console.log) .catch(console.error)
				
			

只需使用 fetch 函数并将 URL 作为参数传递,然后使用 then 或 catch 函数依次执行下一个程序即可。

在上述代码中,我们首先键入一个 api,通过第一个 then 函数获得返回结果,然后通过第二个 then 函数打印信息。最后,通过 catch 函数,如果失败,将打印失败信息。


Async & Await

JavaScript Async

另一种更常见、更广泛使用的异步语法是使用 Async & Await 异步函数,它们比 Promise & Fetch 更简洁、更易懂,也更符合我们的阅读习惯。

如果将上面的获取改写为 async 和 await 语法

				
					const getCatData = async() => { let res = await fetch("https://api.thecatapi.com/v1/images/search") let { results } = await res.json() console.log(results) } getCatData() /* [ { id: "ac5", url: "https://cdn2.thecatapi.com/images/ac5.jpg", width: 565, height: 551 } ] */
				
			

在函数的第一行使用 async 关键字,告诉计算机这是一个异步函数,然后在任何需要等待完成异步函数的异步请求前面添加 await 关键字即可。 那么我们如何获取失败信息呢? 我们只需在 async & await 中添加 try & catch 语法,这样就可以先在 try 中运行程序,然后在 catch 中处理 Promise 的失败状态。

				
					const getCatData = async() => { try { let res = await fetch("https://api.thecatapi.com/v1/images/search") let { results } = await res.json() console.log( results) } catch (error) { console.log(error) } } getCatData()
				
			

建構Promise 物件

如上所述,Promise 有三种状态:Fulfilled(完成)、Rejected(拒绝)和 Pending(待定),但就结果而言,它们都可以归纳为两种结果:Success(成功)和 Failure(失败)。 因此,在执行异步函数时,也可以将执行结果发回,并使用 Promise 对象来存储。

				
					const getCatData = () => new Promise((resolves, rejects) => { const api = "https://api.thecatapi.com/v1/images/search" const request = new XMLHttpRequest; request.open("GET ", api); request.onload = () => { request.status === 200 ? resolves(JSON.parse(request.response).results) : rejects(Error(request.statusText)) } request.onerror = err => rejects(err); request.send() })
				
			

结论

本文解释了异步的概念和一些实际工作,但异步本身是一个比较难的概念,有些语法也有点难,欢迎读者收藏本文,以后可以回来复习这些内容。如果您有任何建议或问题,欢迎留言! 如果您喜欢本系列文章,请不要犹豫,点击喜欢并分享,让更多人看到。

其他React文章參考

React 白皮书活动 01--JavaScript ES6

React 白皮书活动 02--JavaScript ES6 对象

大公司为何使用 Nx?Monorepo 工具 5 分钟快速构建

你真的了解 Monorepo 吗?5 分钟了解前端大型架构。

什么是 Zustand?React 前端状态管理

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

zh_CN简体中文