一起使用 async await 和 .then

Question

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;
  }

Answer 1

我总是使用async/await和.catch()而不是使用async/await和try/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();

Answer 2

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

从下面的示例中可以看出，您可以使用两种方法来处理等待结果和错误，关键字 await 使 JavaScript 等到该承诺解决并返回其结果（一个您从已解决的承诺中获得）。因此有没有害处（我不完全理解你在这里所说的危害）。

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

Answer 3

不想让死人复活，但想指出使用await 和then 链意味着：

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

x 的值被赋值为.then 的返回值，这对我来说不是很直观。

Answer 4

如果您使用 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
  }
}

在你的承诺中使用：

throw new Error("oops!");

或者

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

Answer 5

我认为混合使用 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

所以，混用是危险的，顺便说一下，读码是有害的。