追求JS小姊姊系列 Day29 -- 方函式的能力展现：最後型态`async`

前情提要：

讲述完工具人的起源

方函式：终於到了最後一个能力async模式。
我：到现在都遇不到JS...

先知道async跟generator使用方式非常相似，
generator：用yield控制流程
async：用await控制

两者差别在於async回传的是一个Promise物件而不是{value:any,done:Boolean}。

如果想基本认识`generator`的可参考我在D14写关於生成器的文章

基本认识

async function建构子建立，基本架构为：

//宣告
async function adds(){
    ....;
};

//装入变数
const x = async function()=>{}

当async被呼叫时，会回传一个Promise物件：

当回传一个值，Promise的状态为resolve，并回传值。
当抛出例外或值时，该Promise状态则为reject并回传值。

`async`回传背後的道理

不知道你会不会好奇，当你呼叫async里面看起来回传1，实际上却是Promise物件，背後是什麽道理。

当async回传1

async function asyncFn(){
    return 1;
}
asyncFn();

是不是会得到相同的结果，原因是当你用async时，它会偷偷帮你转译，所以实际上它长得就像是：

function normal(){
    return Promise.resolve(1);
}
normal();

`await`

数量不限，可写可不写

这个语法只能在async内使用，在async function以外用会syntax error，

function hi(){
    await console.log(x);
}
hi()

非Promise处理非同步使用

async function add(){
    await setTimeout((x=1)=>console.log(x),20000);
    console.log("x")
}
add()

之所以可以这样使用，是因为当你使用非Promise的非同步语法时，它会自动将你输出预设为resolve，并回传值。

加入awiat就能避免流程被setTimeout卡顿。

放Promise都怎麽用呢？
一般await後面会是new Promise

async function add(){
    await new Promise((resolve,reject)=>{
        resolve("accept");
        reject("deny")
    });
    await new Promise((resolve,reject)=>{
        resolve("accept1");
        reject("deny2")
    });
}
add()

`async` vs `Promise` 从可读性比较

假设你现在有三件事情想依序被执行

Promise
若用Promise，就是透过then()去串连

function a() {
  return new Promise((resolve, reject) => resolve("hi a"));
}

function b() {
  return new Promise((resolve, reject) => resolve("hi b"));
}

function c() {
  return new Promise((resolve, reject) => resolve("hi c"));
}

a()
  .then(function (x) {
    console.log(x);
    return b();
  })
  .then(function (x) {
    console.log(x);
    return c();
  })
  .then((y) => console.log(y));

async

async function hi() {
  let res1 = await new Promise((resolve, reject) => resolve("hi a"));
  let res2 = await new Promise((resolve, reject) => resolve("hi b"));
  let res3 = await new Promise((resolve, reject) => resolve("hi c"));
  console.log(res1);
  console.log(res2);
  console.log(res3);
}
hi();