目录
欢迎来到 React Vernacular Campaign 系列的第三部分，我们将深入探讨 JavaScript 中的异步操作，并介绍两个重要的关键字：Async 和 Await。在本文中，我们将通过实际示例演示异步操作的概念，以及如何使用 Promise、Fetch、Async 和 Await 更有效地处理异步代码。
序言
异步操作在现代网络开发中变得越来越重要。本文将从基本概念入手，讨论异步操作的原理以及如何使用高级 JavaScript 语法处理异步情况。
本篇文章介绍异步 JavaScript
- 非同步
- Promise & Fetch
- Async & Await
- 建構Promise 物件
异步
异步是开发中的一个基本概念，在以前的代码中，异步目前是一个同步概念，即程序将按顺序运行。
但是，在开发网页的过程中，有时需要执行异步操作，例如：用户点击下面的表单发送时，我们必须等待数据传输结束，并让服务器返回数据才能知道是否成功。
在服务器返回结果之前，直接通过 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 分钟快速构建
简体中文 
繁體中文 
English 
한국어 
日本語 
Español