js - 如何在 Promise .then() 中调用异步函数

Question

首先，我不得不提一下，我已经在 stackoverflow 中查看了许多问题，但许多问题都没有回答我的问题。 更不用说很多人甚至没有答案。

如何实现以下目标，确保functionB()在functionA()完成后执行？

注意：我不想将异步函数转换为new Promise(resolve=>{...})
因为我还必须转换someServiceThatMakesHTTPCall()以及调用堆栈中的任何其他异步函数，这是一个很大的变化。

  function functionThatCannotHaveAsyncKeyword() {
      functionA()
        .then(async function() {
            await functionB();
        })
        .then(function() {
            console.log('last');
        });
  }

  async function functionA() {
      console.log('first');
      await someServiceThatMakesHTTPCall();
  }

  async function functionB() {
      console.log('second');
      await someServiceThatMakesHTTPCall();
  }

Answer 1

用你的方法await在async then回调会的工作，但它是不必要的复杂，如果你想要做的是调用async功能，并通过链有其结果传播。 但是如果您正在做其他事情并且想要async函数的语法优势，那很好。 稍后我会回到这个话题。

async函数返回承诺，因此您只需返回调用函数的结果：

function functionThatCannotHaveAsyncKeyword() {
    functionA()
        .then(function() {
            return functionB(someArgument);
        })
        .then(function() {
            console.log('last');
        }); // <=== Note: You need a `catch` here, or this function needs
            // to return the promise chain to its caller so its caller can
            // handle errors
}

如果要将functionA的分辨率值传递给functionB ，则可以更直接地进行：

functionA()
    .then(functionB)
    // ...

当您返回从一个承诺then回调，调用所创建的承诺then被解析为您返回承诺：它会等待其他承诺解决，那么解决的方法相同。

例子：

 const wait = (duration, ...args) => new Promise(resolve => { setTimeout(resolve, duration, ...args); }); async function functionA() { await wait(500); return 42; } async function functionB() { await wait(200); return "answer"; } functionB() .then(result => { console.log(result); // "answer" return functionA(); }) .then(result => { console.log(result); // 42 }) .catch(error => { // ...handle error... });

回到使用async then callback 的方法：这也有效，并且在您做更多事情时很有意义：

 const wait = (duration, ...args) => new Promise(resolve => { setTimeout(resolve, duration, ...args); }); async function functionA() { await wait(500); return 42; } async function functionB() { await wait(200); return "answer"; } functionB() .then(async (result) => { console.log(result); // "answer" const v = await functionA(); if (v < 60) { console.log("Waiting 400ms..."); await wait(400); console.log("Done waiting"); } console.log(v); // 42 }) .catch(error => { // ...handle error... });

Answer 2

您可以在第一个方法中使用 promise 作为

function functionThatCannotHaveAsyncKeyword() {
    return new Promise(async(resolve, reject)=> {
          await functionA();
          await functionB();
          console.log('last');
          resolve();    
      });
  }

  async function functionA() {
      console.log('first');
      await someServiceThatMakesHTTPCall();
  }

  async function functionB() {
      console.log('second');
      await someServiceThatMakesHTTPCall();
  }

Answer 3

如果someServiceThatMakesHTTPCall是异步的，您可以通过执行以下操作来避免所有这些：

function functionThatCannotHaveAsyncKeyword() {
    functionA()
        .then(function() {
            return functionB()
        })
        .then(function() {
            console.log('last');
        });
  }

  function functionA() {
      console.log('first');
      return someServiceThatMakesHTTPCall();
  }

  function functionB() {
      console.log('second');
      return someServiceThatMakesHTTPCall();
  }