一起使用 async await 和 .then

IT技术 javascript node.js asynchronous promise async-await
2021-03-14 07:15:36

async/await.then().catch()一起使用有没有什么害处,比如:

async apiCall(params) {
    var results = await this.anotherCall()
      .then(results => {
        //do any results transformations
        return results;
      })
      .catch(error => {
        //handle any errors here
      });
    return results;
  }
5个回答

我总是使用async/awaitand.catch()而不是使用 async/awaitandtry/catch来紧凑地编写代码。

async function asyncTask() {
  throw new Error('network')
}
async function main() {
  const result = await asyncTask().catch(error => console.error(error));
  console.log('result:', result)
}

main();

如果你想在错误发生时得到一个回退值,你可以忽略错误并在.catch()方法内部返回一个值

async function asyncTask() {
  throw new Error('network')
}
async function main() {
  const result = await asyncTask().catch(_ => 'fallback value');
  console.log('result:', result)
}

main();

假设您在该result =之后有更多代码假设有错误。result那么未定义的吗?
2021-04-17 07:15:36
@JeffPadgett 更新答案。
2021-04-28 07:15:36
@JeffPadgett 是的,您可以从该.catch()方法返回一个回退值
2021-04-30 07:15:36
您介意使用该.catch()方法的后备更新您的答案吗?
2021-05-03 07:15:36
我没有想到你的方式,但我真的很喜欢它!我通常以相反的方式混合它们,使用带有 await 的 try/catch 语句并使用 .then 执行额外的转换或其他任何已解决的Promise。
2021-05-08 07:15:36

异步函数可以包含一个 await 表达式,该表达式暂停异步函数的执行并等待传递的 Promise 的解析,然后恢复异步函数的执行并返回解析的值。

正如您从下面的示例中看到的,您可以使用两种方法来处理等待结果和错误,关键字 await 使 JavaScript 等待,直到该Promise解决并返回其结果(您从已解决的Promise中获得一种)。因此,没有任何危害(我不完全理解你在这里所说的伤害是什么)。

function returnpromise(val) {
  return new Promise((resolve, reject) => {
    if (val > 5) {
      resolve("resolved"); // fulfilled
    } else {
      reject("rejected"); // rejected
    }
  });
}

//This is how you handle errors in await
async function apicall() {
  try {
    console.log(await returnpromise(5))
  } catch (error) {
    console.log(error)
  }
}

async function apicall2() {
  let data = await returnpromise(2).catch((error) => {
    console.log(error)
  })
}

apicall2();
apicall();

如需进一步参考,请查看- MDN DOCS

不想复活死者,但想指出awaitthen一起使用意味着结果:

const x = await someAsyncFn().then(() => doSomeLogging());

的值x被分配了的返回值.then,这对我来说不是非常直观。

如果您使用 Async/await,则无需将.then()返回的结果链接resolve()到变量中(response在示例中),但如果您想处理错误,则必须尝试/捕获代码:

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

在你的Promise中使用:

throw new Error("oops!");

或者

Promise.reject(new Error("Whoops!"));

我一直在使用它,它比使用 .then + 另一个匿名异步函数更好,这使整个事情变得难以辨认
2021-05-16 07:15:36

我不认为混合使用 async/await + then 是个好主意。尤其是当你专注于 async func 的 res 时,混合使用会带来一些风险,悄悄地扭曲你的 res。

例子:

const res = await fetchData().then(()=>{return "something else"}).catch((err)=>{});

console.log(res); // not expected res data but something else

所以,混合使用是危险的,顺便说一下,它会损害阅读代码。

建议:添加代码围栏和语言标识符以突出代码并使其更具可读性。
2021-05-04 07:15:36