Javascript之简单理解async/await

什么是async？什么是await？

在JavaScript的世界，同步sync异步async的爱恨情仇，就如同偶像剧一般的剪不断理还乱，特别像是setTimeout、setInterval、MLHttpRequest或fetch这些同步、异步混杂的用法，都会让人一个头两个大，幸好ES6出现了promise，ES7出现了async、await，帮助我们可以更容易的进行代码逻辑的撰写。

对于同步和异步理解，使我觉得比较好理解的方法：「同一个跑道vs不同跑道」，透过跑步的方式，就更容易明白同步和异步。

• 同步：在「同一个跑道」比赛「接力赛跑」，当棒子没有交给我，我就得等你，不能跑。
• 异步：在「不(非)同跑道」比赛「赛跑」，谁都不等谁，只要轮到我跑，我就开始跑。

在ES7里async的本质是promise的语法糖，只要function标记为async，就表示里头可以撰写await的同步语法，而await顾名思义就是「等待」，它会确保一个promise函数都执行到解决(resolve )或出错( reject)后才会进行下一步，当async function的内容全都结束后，会返回一个promise，这表示后方可以使用.then语法来做连接，基本的代码就像下面这样：

async function a(){
  await b();
  .....       // 等 b() 完成後才會執行
  await c();
  .....       // 等 c() 完成後才會執行
  await new Promise(resolve=>{
    .....
  });
  .....       // 上方的 promise 完成後才會執行
}
a();
a().then(()=>{
  .....       // 等 a() 完成後接著執行
});

利用async 和await 做个「漂亮的等待」

比较了解async和await的意思之后，就来试试看做个「漂亮的等待」，使用ES6 的promise来实现delay (如同下方的代码范例) ，这个delay透过.then来完成一步一步的串接，虽然逻辑上很清楚，但若要实作比较复杂的流程，就得把每个代码写在对应的callback里，也就没有想像的容易，这就是「不太漂亮的等待」 (使用setTimeout的做法就是不漂亮的等待)。

const delay = (s) => {
  return new Promise(resolve => {
    setTimeout(resolve,s); 
  });
};

delay().then(() => {
  console.log(1);     // 顯示 1
  return delay(1000); // 延遲ㄧ秒
}).then(() => {
  console.log(2);     // 顯示 2
  return delay(2000); // 延遲二秒
}).then(() => {
  console.log(3);     // 顯示 3
});

如果我们把上面的代码修改为async和await的写法，突然就发现代码看起来非常的干净，因为await会等待收到resolve之后才会进行后面的动作，如果没有收到就会一直处在等待的状态，所以什么时候该等待，什么时候该做下一步，就会非常清楚明了，这也就是我所谓「漂亮的等待」。

注意，await一定得运行在async function 内！

~async function{           // ~ 開頭表示直接執行這個 function，結尾有 ()
  const delay = (s) => {
    return new Promise(function(resolve){  // 回傳一個 promise
      setTimeout(resolve,s);               // 等待多少秒之後 resolve()
    });
  };

  console.log(1);      // 顯示 1
  await delay(1000);   // 延遲ㄧ秒
  console.log(2);      // 顯示 2
  await delay(2000);   // 延遲二秒
  console.log(3);      // 顯示 3
}();

搭配Promise

基本上只要有async和await 的地方，就一定有promise的存在，promise顾名思义就是「保证执行之后才会做什么事情」，刚刚使用了async、await和promise改善setTimeout这个容易出错的异步等待，针对setInterval，也能用同样的做法修改

举例来说，下面的代码执行之后，并「不会」如我们预期的「先显示1，再显示haha0...haha5 ，最后再显示2」，而是「先显示1和2，然后再出现haha0...haha5」，因为虽然代码逻辑是从上往下，但在count function里头是异步的语法，导致自己走自己的路，也造成了结果的不如预期。

const count = (t,s) => {
  let a = 0;
  let timer = setInterval(() => {
    console.log(`${t}${a}`);
    a = a + 1;
    if(a>5){
      clearInterval(timer);
    }
  },s);
};

console.log(1); 
count('haha', 100);
console.log(2);

这时我们可以透过async、await和promise进行修正，在显示1之后，会「等待」count function结束后再显示2。

~async function(){  
  const count = (t,s) => {
      return new Promise(resolve => {
        let a = 0;
        let timer = setInterval(() => {
          console.log(`${t}${a}`);
          a = a + 1;
          if(a>5){
            clearInterval(timer);
            resolve();  // 表示完成
          }
        },s);
      });
    };

  console.log(1); 
  await count('haha', 100);
  console.log(2);
}();

链式调用

假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作：

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 100，这个值将用于下一步骤
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 100), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}

Promise实现

function init() {
    console.time("start init");
    const time1 = 100;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("end init");
        });
}

init();

// step1 with 100
// step2 with 200
// step3 with 300
// result is 400

async awit实现

async function init() {
    console.time("start init");
    const time1 = 100;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("end init");
}

init();

结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多

关于文中几个知识点概念

setTimeout()

方法用于在指定的毫秒数后调用函数或计算表达式。

function fn1(){
			console.log("你好");
		}
setTimeout(fn1,3000);

setInterval()

每隔一段时间执行一次指定的语句或函数，是个重复性的操作。

setInterval(fn1,8000); 

小结

坦白说只要你一但熟悉了async和await，就真的回不去了，虽然说callback 仍然是代码开发里必备的功能，但对于同步和异步之间的转换，以后就交给async 和await来处理吧！