前端 js 经典：async 和 await

async 作为一个关键字放到函数前面，用于表示函数是一个异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。async 函数返回的是一个 Promise 对象await 后面可以放任何表达式，不过正常情况下还是放一个返回 promise 对象的表达式。await 关键字只能放在 async 函数里// 延时函数delay});// f() 异步函数就完美的解决了回调函数问题// 6秒

yqcoder

504人浏览 · 2023-06-26 16:27:33

yqcoder · 2023-06-26 16:27:33 发布

1. 什么是 async

async 作为一个关键字放到函数前面，用于表示函数是一个异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

async 函数返回的是一个 Promise 对象

2. 怎么用

// 调用fn返回的是promise对象，如果我们要拿到返回值，用then，如果返回错误，用catch
async function fn(flag) {
  if (flag) {
    return "success";
  } else {
    throw "faild";
  }
}
fn(true)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

3. 什么是 await

await 后面可以放任何表达式，不过正常情况下还是放一个返回 promise 对象的表达式。

await 关键字只能放在 async 函数里

// 延时函数delay
const delay = (time) =>
  new Promise((resolve) => {
    setTimeout(resolve, time);
  });

// f() 异步函数就完美的解决了回调函数问题
async function f() {
  await delay(1000);
  await delay(2000);
  await delay(3000);
  return "done";
}

// 6秒后打印结果 done
f().then((data) => {
  console.log(data);
});

4. try...catch

await 后的 promise 对象报错怎么办，页面不可能一直卡在那不动，这对于用户体验是很不友好的。那么 try...catch 应运而生

let faildPro = new Promise((resolve, reject) => {
  reject("失败啦");
});

async function resultFn() {
  try {
    let result = await faildPro;
    return result;
  } catch (err) {
    throw err;
  }
}

resultFn()
  .then((res) => {
    console.log(`返回体：${res}`);
  })
  .catch((err) => {
    console.log(`错误信息：${err}`);
  }); // 错误信息：失败啦