Javascript等待/异步功能-如果函数中没有等待字，该怎么办? [英] Javascript Await/Async Feature - What if you do not have the await word in the function?

问题描述

我正在学习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.

来自 https://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(`https://api.github.com/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(`https://api.github.com/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.

这篇关于Javascript等待/异步功能-如果函数中没有等待字，该怎么办?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！