#3 JavaScript Crash Course 2

今天教 Promise Async / Await。

Promise

Promise 这个东西跟时间有点关系。

简单来说就是你先当下可能没有东西，所以先给个承诺说东西等一下到，Promise 就是那个承诺。

但是你也知道承诺是空话，不一定会实现，可能会跳票。

Promise 也会遇到这两种状况： resolve 跟 reject。

let p = new Promise((resolve, reject) => {
    // 如果成功: resolve();
    // 反之: reject();
})

但其实我觉得有个 Promise 的概念就好，比较重要的是下面这些：

p.then((承诺过的东西) => {
    // 处理承诺过的东西
}).catch((跳票了) => {
    // 处理跳票的状况
}).finally(() => {
    // 不管发生什麽状况，都会执行
})

用 then 来接着处里资料，可以 .then((...)=>...).then((...)=>...)... 接下去像 pipeline 一样。
用 catch 来处里错误。
finally 则是无论错误是否发生都会处理，虽是 finally 但其实可像 then 连续接下去。
三者皆非强制使用，不一定 Promise 後面一定要接它们

Promise 常在做网路请求时用到，因为发起请求到拿到资料中间会有延迟，总不能让程序一直等在那里浪费时间，所以用 Promise 来先承诺之後有资料会来，要记得处里。

关於这些东西跟 Concurrency 有点关系，有兴趣可以用 Concurrency 关键字查查看。

你可能会听过 callback，它是 Promise 出现前常用来处理具时间差问题的方法，现在也还是有被使用，但我认为现在 Promise 比较好用也比较常用。

Async / Await

昨天说到的 async function：

async function () {}

它长得其实就像是一般的函式，只不过前面加了个 async。
它的回传值其实也就是一般函式的回传值包上 Promise。

async function get3() {
    return 3;
}

get3().then(num => {
    console.log(num); // 3
});

需要注意的是，当你执行 async function 时，它会与原程序并行处里。

如果你学过 Go ，就像是 goroutine 那样，只不过它不会切来切去，如果某人一直占用运算资源，那它会一直独占

你可能会想说，如果我一开始 async function 是不是就只能用 then chain 接下去了啊？
当然不是，我们有 await。

// 假设 getFile 从执行到结束存在延迟
async function getFile() {
    let file;
    
    // ...花时间找档案赋给 file...
    
    return file;
}

(async () => {
    // await 会让 getFile 执行完再接下去，同时解析 Promise 的值
    const file = await getFile();
})()

await 是用来等待 async function 执行完成的。

Promise.all

Promise.all() 可以用来合并复数并行 Promise ，常用於等待复数并行 Promise 全部执行完成。

(async () => {
    // 同时向 A, B, C 三方取得资料， tasks 为 3 Promise 组成之阵列
    const tasks = [
        getDataFromA(),
        getDataFromB(),
        getDataFromC()
    ];
    const data = await Promise.all(tasks); // 等待所有 tasks 中的 Promise 完成
    // data 会是所有 tasks 中的 Promise 的值组成的阵列
})()

Promise.race

Promise.race() 与 Promise.all() 都是在复数 Promise 间建立关系，不过它则是只等待复数并行 Promise 其中最早的执行完成。

(async () => {
    // 同时向 A, B, C 三方取得资料， tasks 为 3 Promise 组成之阵列
    const tasks = [
        getDataFromA(),
        getDataFromB(),
        getDataFromC()
    ];
    const data = await Promise.race(tasks); // 等待所有 tasks 中的最早的 Promise 完成
    // data 会是最早完成的 Promise 的值
})()

每日铁人赛热门 Top 10 (0916)

以 9/16 12:00 ~ 9/17 12:00 文章观看数增加值排名

+447 Day 3 云端四大平台比较：AWS . GCP . Azure . Alibaba
- 作者：用图片高效学程序
- 系列：无限手套 AWS 版：掌控一切的 5 + 1 云端必学主题
+419 [Angular 深入浅出三十天：表单与测试] Day01 - 前言
- 作者： Leo
- 系列：Angular 深入浅出三十天：表单与测试
+413 Proxmox VE 准备与安装
- 作者： Jason Cheng (节省哥)
- 系列：突破困境：企业开源虚拟化管理平台
+258 Day 1-酸酸甜甜的湘粤美人-糖醋排骨
- 作者： headhunter_sharon
- 系列：雪伦的30天拜托冰箱
+237 [Day13] 抢 PS5 程序怎麽写? 动态爬虫详细教学!
- 作者： lulu_meat
- 系列：奇怪的知识增加了!原来程序还可以这样用?!
+216 [Day15] 明天是女友的生日却忘记准备礼物? 教你三秒做出爱心照片墙!
- 作者： lulu_meat
- 系列：奇怪的知识增加了!原来程序还可以这样用?!
+208 [Day14] 家里WiFi被妈妈锁了怎麽办? 教你用Python破解WiFi密码 !
- 作者： lulu_meat
- 系列：奇怪的知识增加了!原来程序还可以这样用?!
+204 D01 - 万事起头难
- 作者：鳕鱼
- 系列：你渴望连结吗？将 Web 与硬体连上线吧！
+190 [Day16] 再也不用靠线上工具! 用Python把图片转成ASCII文字图!
- 作者： lulu_meat
- 系列：奇怪的知识增加了!原来程序还可以这样用?!
+154 Day 01 X 系列文大纲
- 作者：莫力全 Kyle Mo
- 系列：今晚，我想来点 Web 前端效能优化大补帖！