20分钟带你掌握JavaScriptPromise和Async/Await

本文旨在引导读者实用地快速掌握JavaScript中Promise和Async/Await的概念和用法。
通常，在开发过程中，我们在处理API网络操作时会遇到耗时的任务，这就需要我们使用异步编程。
Promise作为一种处理异步操作的机制，在JavaScript中经常被广泛使用。
Promise分为三种状态：pending（执行中）、fulfilled（成功）、rejected（失败）。
其执行过程包括调用解析和拒绝函数，分别用于在成功或失败后改变状态。
然后Promise提供了catch和finally分别处理成功、失败和终止的方法。
让我们通过下面的例子来深入理解Promise的基本概念。
假设您的朋友Kayo同意在两周内为您的生日聚会制作蛋糕。
如果一切顺利，Kayo没有生病，你会得到一定数量的蛋糕；如果Kayo生病了，就没有蛋糕，但聚会会继续。
要将这个故事翻译成JavaScript代码，首先创建一个返回Promise的函数。
2000ms后，Promise的状态会根据Kayo是否生病而改变。
当我们运行onMyBirthday函数，传入参数是否生病时，根据Promise的状态，我们可以通过then、catch、finally方法来处理不同的情况。
例如，如果Kayo没有生病，键盘会打印“我有2颗糖果”，如果她生病了，则会打印“我很难过”，无论结果如何，聚会都会继续。
通过上面的例子，你可以先了解Promise的基本概念和用法。
接下来，我们通过猜谜游戏进一步探索异步编程。
在这个游戏中，玩家必须输入1到6之间的数字。
游戏会随机选择1到6之间的数字，并检查玩家的输入是否符合要求。
如果玩家猜对了数字，他将获得2分，如果差值为1，则获得0分；游戏会询问玩家是否要继续，并根据玩家的选择进行。
使用Promise来实现这个功能，玩家数据、判断结果、是否继续游戏都是通过Promise的then和catch方法来完成的。
当Promise的状态发生变化时，游戏会相应执行不同的逻辑。
为了简化代码并提高可读性，我们使用async/await语法对之前的代码进行了重构。
通过在函数前添加asynchronous关键字，可以将异步操作转换为类似同步代码的编写方式。
这使得代码更加清晰易懂，更容易阅读和维护。
现在，我们从WebAPI获取位置信息。
可以使用FetchAPI从restcountries.eu轻松检索JSON格式的国家/地区数据。
数据检索过程通过Promises执行，确保在新窗口中打开API时正确检索和处理数据。
最后，我们探讨如何从WebAPI获取一个国家的周边国家列表。
首先，我们创建一个函数来从API获取国家/地区信息，然后通过传递国家/地区代码（例如“cn”代表中国）来获取国家/地区详细信息。
接下来，我们创建另一个函数从州详细信息中获取周边国家的列表。
使用Promise.all方法处理一组中的多个Promise，以确保检索所有周围位置信息时的同步。
通过上面四个例子，我们深入学习了JavaScript中Promise和Async/Await的基本概念和实际应用。
在当前的开发中，理解和掌握这些异步编程机制对于提高代码的可维护性和性能至关重要。
实践是最好的学习方法通过不断地练习和应用这些概念，您可以更加熟练地处理异步操作，从而提高开发效率和代码质量。

图解JavaScriptPromises和Async/Await

使用JavaScript代码时，函数执行的随机性和延迟有时会令人困惑。
然而，ES6引入了一个非常酷的新功能，称为Promises，可以帮助解决此类问题。
Promise是一个值的占位符，可以在将来的某个时刻解决或拒绝。
过去，回调地狱问题使代码难以阅读。
引入Promises后，您可以用更现代、更优雅的方式编写代码。
让我们从一个例子开始。
导入图像、调整其大小、应用滤镜并保存。
Promise允许您通过将每个操作封装在返回Promise的函数中来避免嵌套回调。
这使您的代码更清晰且更易于维护。
Promise的语法相对直观。
我们使用Promise构造函数创建一个包含状态和值的对象。
状态可以是待处理、已完成或已拒绝。
调用resolve()或reject()方法允许您在适当的时间更改状态。
该值是resolve()或reject()方法的参数。
您可以通过.then()方法链处理Promise的结果。
一旦Promise被解析，.then()方法可用于接收解析值，.catch()方法用于处理拒绝情况。
这样你就不需要整个Promise对象，只需要最终值。
Promise的真正威力在于它们引入异步行为的能力。
在执行过程中，您可以通过.then()、.catch()和.finally()方法中的回调函数处理异步操作的结果。
例如，.then()链允许您将处理后的图像传递给下一个函数，避免复杂的嵌套回调。
异步行为是JavaScript单线程环境中非阻塞的关键。
Promise允许您通过引入微任务和宏任务队列来处理异步任务，而不会阻塞主线程。
当Promise被解析时，回调函数就会被添加到微任务队列中。
这意味着执行时间是不确定的，其他代码可以继续运行。
为了简化异步编程，ES7引入了async和Wait关键字。
异步函数可以隐式返回Promise，并且wait关键字可用于暂停异步函数的执行，直到它被WaitPromise解析。
这允许您像同步代码一样处理异步操作的结果，而不必担心回调地狱或复杂的Promise链。
使用async/await可以让你的代码更加简洁、更容易理解。
不再需要显式创建Promise对象。
只需在函数前添加async关键字，必要时使用wait关键字等待异步操作的结果。
这种方法使异步编程代码看起来几乎像同步代码。
总的来说，Promises和async/await是处理JavaScript中异步操作的强大工具。
它不仅简化了代码编写，而且还使异步编程更加直观、更易于维护。
通过理解和利用这些特性，我们可以编写更高效、更可维护的JavaScript代码。

关于Javascript中defer和async的区别总结

1.defer和async在网络读取（脚本下载）方面是一样的，都是异步（对比HTML解析）2.两者的区别是：当脚本下载完成后，显然defer是最接近我们的。
加载和执行应用程序脚本的要求。
立即推迟下载但延迟执行。
加载文档以下元素的过程将与加载脚本并行执行（异步），但脚本的执行必须在解析完所有元素之后且在DOMContentLoaded事件之前完成。
被触发。
async被删除并立即执行，加载和跟踪文档元素的过程将与脚本的加载和执行并行完成（异步）。
3.为了延迟，我们还必须记住按照加载的顺序进行写入。
因为脚本的加载和执行都是立即的，无论您声明它的顺序如何，它都会在加载后立即执行。
5.async对于应用程序脚本来说不是很有用，因为它根本不考虑依赖关系（即使是在执行序列的最后一步），但是它非常适合不依赖于任何脚本或不依赖于任何脚本的脚本任何脚本。