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

前情提要:

讲述完工具人的起源

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


先知道asyncgenerator使用方式非常相似
generator:用yield控制流程
async:用await控制

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

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

基本认识

async function建构子建立,基本架构为:

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

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

async被呼叫时,会回传一个Promise物件:

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

async回传背後的道理

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

async回传1

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

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

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

await

数量不限,可写可不写

  1. 这个语法只能在async内使用,在async function以外用会syntax error
function hi(){
    await console.log(x);
}
hi()

  1. Promise处理非同步使用
async function add(){
    await setTimeout((x=1)=>console.log(x),20000);
    console.log("x")
}
add()

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

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

  1. 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();

比较起来,是不是好读许多呢?

感谢我的队友帮忙
推推她的文章初学者跪着学JavaScript Day29 : async 和 await

-- to be continued --

一切都要结束了?


那今天就到这边搂!
每天的休息,是为了後面的追求,明天见。


reference:

MDN
Async & Await


<<:  那些被忽略但很好用的 Web API / Geolocation

>>:  Day 29 - styled-components 笔记4

Day27:今天我们来聊一下IoT and OT Hacking

物联网(IoT)的重大发展促进了日常生活中连网设备的激增。 从智能家庭到自动化医疗保健应用,物联网无...

[DAY 19] _ARM-M0-内核外设SysTick-写个精准的Delay

SysTick是内核系统的定时器,先来看看SysTick来源在哪,下图stm32f030cc的时钟树...

DAY12 特徵工程-资料化约(特徵选取)

特徵工程可以分为两大部分,一是根据现有的资料特徵进行筛选,选出较有影响力的特徵进行训练,另一个是根据...

[Day10]-字典2

遍历字典 Items() 可以取得key跟value Key() 只取得key Values() ...

D10 - 如何用 Google Apps Script 自动化对 Google Drive 的操作?(二)自动列出所有档案并设定权限

来到了第十天。我们的习惯是先讲结论,如果你很急着用,可以直接使用这份 Add-On: Drive E...