JavaScript异步/等待

我试图理解JavaScript异步/等待。如何重写以下内容，使输出为“Hi”然后“Bye”，而不是“Bye”然后“Hi”：

---

对于不返回

Promise

调用异步函数时，它返回一个承诺。当异步函数返回一个值时，将使用返回的值解析承诺。当异步函数抛出异常或某个值时，承诺将被抛出的值拒绝

异步函数可以包含等待表达式，该表达式暂停异步函数的执行并等待传递的承诺的解析，然后恢复异步函数的执行并返回解析的值

通常，它用于处理来自服务器的数据，因为当您有多个查询时，它会覆盖上一个查询，而您将处理错误的查询

---

Async/await允许您准确地处理您正在等待的数据。

setTimeout

不会返回

承诺。创建一个helper函数，将其包装在一个
Promise
中，然后您可以
等待它


功能延迟（fn，t）{
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
解析（fn（））；
}，t）；
});
}
()
.然后（再见）；
异步函数sayHi（）{
等待延迟（（）=>{
//$（“#myOutput”）.text（'hi'）；
控制台日志（“Hi”）；
}, 1000);
}
异步函数saybeye（）{
//$（“#myOutput”）.text（'bye'）；
控制台日志（“再见”）；
}
为了等待
设置超时
需要将其包装到Promise中。然后，使用async/await，您可以扁平化代码，无需承诺即可编写API：


（async（）=>{//await必须位于async函数内部，在本例中是匿名的
等待沙伊（）
再见
})()
异步函数sayHi（）{
返回新承诺（函数（解析）{
$（“#myOutput”）.text（'hi'）；
setTimeout（函数（）{
解决（）
}, 1000)
});
}
异步函数saybeye（）{
$（“#myOutput”）.text（'bye'）；
}
使用
承诺
方式

sayHi() 
    .then(sayBye);

function sayHi() {
    return new Promise(resolve => {
        setTimeout(()=> {
            $("#myOutput").text('hi'), resolve()
        }, 1000);
    })
}

async function sayBye() {
    $("#myOutput").text('bye');
}

或者像这样的
sayHi
：

async function sayHi() {
    await new Promise(resolve => {
        setTimeout(()=> {
            $("#myOutput").text('hi'), resolve()
        }, 1000)
    })
}

使用async/await是以可控的方式构建非同步代码的一种很好的方法。基于承诺的异步函数进入microtasks存储库，在普通DOM refresh/web API存储库中包含的事件和方法之前执行该事件循环（例如setTimeout（）。但是，一些版本的Opera和Firefox浏览器将优先权设置为setTimeout（），而不是microtasks。无论如何，如果将基于承诺的函数与启用异步/等待的函数结合起来，则可以控制执行顺序。例如：

// create function that returns Promise
let hi = () => {
  return new Promise((resolve, reject) => {
    setTimeout(_ => {
      resolve('Hi '); // after 1500ms function is resolved and returns 'Hi '
    }, 1500);
  });
}

// create ordinary function that will return 'bye'
let sayBye = () => {
  return 'Bye';
}

// create third function that will be async 'enabled', 
// so it can use await keyword before Promise based functions
let sayHi = async () => {
  let first = await hi();  // we store 'Hi ' into 'first' variable
  console.log(first);
  let second = sayBye(); // this execution will await until hi() is finished
  console.log(second);
}

// execute async enabled function
sayHi();

我们可以在sayHi（）函数中添加try/catch块来控制promise reject（）上的错误，但这超出了您的问题范围

祝你今天愉快
 您不能等待
设置超时
，因为它不会返回一个
承诺
。对于那些喜欢箭头函数的人来说，可能是重复的<代码>常量延迟=时间=>新承诺（res=>setTimeout（res，time））// create function that returns Promise
let hi = () => {
  return new Promise((resolve, reject) => {
    setTimeout(_ => {
      resolve('Hi '); // after 1500ms function is resolved and returns 'Hi '
    }, 1500);
  });
}

// create ordinary function that will return 'bye'
let sayBye = () => {
  return 'Bye';
}

// create third function that will be async 'enabled', 
// so it can use await keyword before Promise based functions
let sayHi = async () => {
  let first = await hi();  // we store 'Hi ' into 'first' variable
  console.log(first);
  let second = sayBye(); // this execution will await until hi() is finished
  console.log(second);
}

// execute async enabled function
sayHi();