Javascript中async与await的用法

问题

希望在一个函数执行完毕之后才去执行另外一个函数，如何解决？

关于async

async 其实就是promise的语法糖。函数前面必须加一个async，异步操作的方法前加一个await 关键字。顾名思义，就是让你等一下，执行完了再继续往下走。注意：await 只能在async函数中执行，否则会报错。

关于await

• await的意思就是等待。它后面可以跟一个表达式。如果是值(如字符串、数字、普通对象等等)的话，返回值就是本身的值。
• 通常使用方式为在后面跟一个promise对象。await会等待这个promise的状态由pending转为fulfilled或者rejected。在此期间它会阻塞，延迟执行await语句后面的语句。
• 如果promise对象的结果是resolve，它会将resolve的值，作为await表达式的运算结果。

例子

对于一个操作（创建菜单），需要在获取到token之后利用token才能执行这个操作，那么对应代码如下：

//获取token
const getToken = async () => {
  global.token=await new Promise((resolve) => {
    setTimeout(() => {
      resolve("loftyamb");
    }, 3000);//模拟通过post请求获取token返回token的过程
  });
  console.log(`成功获取到了token${global.token}`);
  //上面的打印语句会被promise对象所阻塞，直到promise对象的状态发送改变
};

//利用获取到的token，进行创建菜单的操作
const createMenu = async () => {
  if (global.token !== undefined) {
    console.log(`利用token${global.token}成功创建了菜单`);
  } else {
    console.log("创建失败");
  }
};

那么可用以下方式实现二者的依次执行：

const setMenu=async ()=>{
    await getToken();
    await createMenu();
}

执行：

const setMenu=async ()=>{
    await getToken();
    await createMenu();//该方法会等待前面的方法执行完毕之后才执行
}
setMenu();

输出结果：

成功获取到了tokenloftyamb
利用tokenloftyamb成功创建了菜单

关于异常

例：假定上述例子在获取token的时候发生了异常，即Promise对象状态为reject，此时要在async函数中对异常进行处理，如下所示：

//获取token
const getToken = async () => {
  try {
    global.token = await new Promise((resolve, reject) => {
      setTimeout(() => {
        reject("error");
      }, 3000);
    });
  } catch (err) {
    console.log(err);
  }
  console.log(`成功获取到了token${global.token}`);//异常被捕获后则此语句仍能正常执行
};

当异常被处理之后，则await之后的函数仍然会正常执行