Javascript等待/异步功能

本文介绍了Javascript等待/异步功能-如果函数中没有等待字，该怎么办?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在学习Javascript ES2017异步/等待功能. 一直在阅读许多有关它的内容，并了解到等待就像是屈服，并且使我们能够等待诺言完成.

I am learning about Javascript ES2017 async/await feature. Been reading a lot about it, and came across an understanding that await is like yield, and allows us to wait for the promises to complete.

来自 javascript.info/async-await

async function showAvatar() { // read our JSON let response = await fetch('/article/promise-chaining/user.json'); let user = await response.json(); // read github user let githubResponse = await fetch(`api.github/users/${user.name}`); let githubUser = await githubResponse.json(); // show the avatar let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); // wait 3 seconds await new Promise((resolve, reject) => setTimeout(resolve, 3000)); img.remove(); return githubUser; } showAvatar();

我的问题是，我可以在每行代码中添加一个代码吗? 或者，如果我删除等待"一词会怎样?

The question I have is, can I add await to every single line of code? Or what happens if I remove the word await?

另一个问题是，如果async/await使代码看起来像是按顺序同步运行，为什么我们根本不使用它(意味着使所有内容始终保持同步?)

And another question is, if async/ await makes the code seems to run synchronously and in order, why don't we don't use it at all (means make everything stay synchronous in the first place?)

谢谢！

推荐答案

async函数只是Promises中的语法糖.它并没有改变将功能变为同步的功能.实际上，任何async函数都会隐式返回Promise对象.

async functions are just syntactic sugar around Promises. It does nothing to change the function to be synchronous. In fact any function that is async implicitly returns a Promise object.

所有await所做的都是提供一种方便的方式来等待Promise.如果删除await关键字，则Promise不会被解包"，如果您的函数要根据该Promise的结果进行操作，这不是您想要的.

All await does is provide a convenient way to wait for a Promise. If you remove the await keyword, then the Promise will not be "unwrapped," which is not what you want if your function is going to operate on the result of that Promise.

为了说明这一点，这是异步功能的简化版本:

To illustrate, this is the desugared version of your async function:

function showAvatar() { let githubUser; // read our JSON return fetch('/article/promise-chaining/user.json').then(response => { return response.json(); }).then(user => { // read github user return fetch(`api.github/users/${user.name}`); }).then(githubResponse => { return githubResponse.json(); }).then(user => { githubUser = user; // show the avatar let img = document.createElement('img'); img.src = githubUser.avatar_url; img.className = "promise-avatar-example"; document.body.append(img); // wait 3 seconds return new Promise((resolve, reject) => setTimeout(resolve, 3000)); }).then(() => { img.remove(); return githubUser; }); }

所以await本质上只是在Promise中添加了.then回调.如果不指定await，则只会有一个Promise对象，而不是Promise的结果.

So await essentially just adds a .then callback to a Promise. Without await being specified, you'll just have a Promise object, not the result of the Promise.