关于前端:JavaScript高级程序设计笔记11-期约与异步函数Promise-Async-Function

63次阅读

共计 21676 个字符，预计需要花费 55 分钟才能阅读完成。

期约与异步函数

ES6 新增 Promise 援用类型，反对优雅地定义和组织异步逻辑。

ES8 减少了应用 async 和 await 关键字定义异步函数的机制。

异步编程

JavaScript 这种单线程事件循环模型

异步行为是为了优化因计算量大而工夫长的操作。（在期待其余操作实现的同时，即时运行其余指令，零碎也能保持稳定）

只有你不想为期待某个操作而阻塞线程执行，那么任何时候都能够应用（异步操作）。

同步与异步

同步：这样的执行流程容易分析程序在执行到代码任意地位时的状态。在程序执行的每一步，都能够推断出程序的状态。

let x = 3;
x = x + 4;

这两行代码大抵对应的低级指令：1）操作系统在栈内存上调配一个存储浮点数值的空间；2）针对这个值做一次数学计算；3）把计算结果写回之前调配的内存中。

异步：相似于零碎中断，即以后过程内部的实体能够触发代码执行。（场景：拜访一些高提早的资源）

let x = 3;
setTimeout(() => x = x + 4, 1000);

执行线程不晓得 x 值何时会扭转，这取决于回调何时从音讯队列入列并执行。由零碎计时器触发，这会生成一个入队执行的中断，什么时候会触发入队中断，对 JavaScript 运行时来说是一个黑盒，无奈预知。

异步代码不容易推断。为了让后续代码可能应用 x，异步执行的函数须要在更新 x 的值当前告诉其余代码。（如果程序不须要这个值，能够不用期待后果）

以往的异步编程模式

在晚期的 JavaScript 中，只反对定义回调函数来 表明 异步操作实现。串联多个异步操作是一个常见的问题，通常须要深度嵌套的回调函数（”回调天堂“）来解决。

setTimeout 能够定义一个在指定工夫之后会被调度执行的回调函数。

function double(value) {setTimeout(() => setTimeout(console.log, 0, value * 2), 1000);
}
double(3);

在运行到 setTimeout 时，JavaScript 运行时开始工作，发现须要设置零碎计时器，等到 1000 毫秒之后，触发执行入队中断，JavaScript 运行时把回调函数推到其音讯队列上期待执行。（回调什么时候入列被执行对 JavaScript 代码齐全不可见）。double()函数在 setTimeout 胜利 调度异步操作（触发 JavaScript 运行时工作？）之后会立刻退出。

  1. 异步返回值

    假如 setTimeout 的异步操作会提供一个有用的值。通常是给异步操作提供一个回调函数，这个回调函数中蕴含要 应用异步返回值 的代码（异步返回值作为回调函数的参数）。

    function double(value, callback) {setTimeout(() => callback(value * 2), 1000);
}
double(3, x => console.log(`I was given: ${x}`));

    这个函数会由 运行时 负责异步调度执行。位于函数闭包中的回调函数及其参数在异步执行时依然是可用的。

  2. 失败解决

    异步操作的失败解决。胜利回调和失败回调。

    这种模式曾经不可取了，因为 必须在初始化异步操作时定义回调。

     function double(value, success, failure) {setTimeout(()=> {
         try {if(typeof value !== 'number') {throw 'Must provide number as first argument';}
             success(value * 2);
         } catch(e) {failure(e);
         }
     }, 1000);
 }
 const successCallback = (x) => console.log(`Success: ${x}`);
 const failureCallback = (e) => console.log(`Failure: ${e}`);

 double(3, successCallback, failureCallback);
 double('p', successCallback, failureCallback);
 // Success: 6
 // Failure: Must provide number as first argument

    异步函数的返回值只在短时间内存在，只有准备好将这个短时间内存在的值作为参数的回调函数能力接管到它。

  3. 嵌套异步回调

    如果异步返回值又依赖另一个异步返回值，那么回调的状况还会进一步变简单。在理论的代码中，这就要求嵌套回调。

    不具备扩展性

期约（Promise)

期约是对尚不存在后果的一个替身。

一种异步程序执行的机制。

Promises/A+ 标准

晚期的期约机制在 jQuery 和 Dojo 中是以 Deferred API 的模式呈现的。为弥合现有实现之间的差别，2012 年 Promise/A+ 组织 fork 了 CommonJS 的 Promise/A+ 倡议，并以雷同的名字制订了 Promise/A+ 标准。这个标准最终成为了 ECMAScript6 标准实现的范本。

ES6 减少了对 Promise/A+ 标准的欠缺反对，即 Promise 类型。异步编程机制。很多其余浏览器 API（如 fetch()和电池 API）也以期约为根底。

期约基本知识

可通过 new 操作符来实例化。创立新期约时，须要传入执行器函数（executor）作为参数。（如果不提供 executor，会抛出 SyntaxError）。

  1. 期约状态机（状态）

    期约是一个有状态的对象，可能处于 3 种状态之一：

    • 待定（pending）：最初始状态
    • 兑现（fulfilled，有时也称为”解决“，resolved）
    • 回绝（rejected）

    在待定状态下，期约能够落定（settled）为代表胜利的兑现（fulfilled）状态，或者代表失败的回绝（rejected）状态。无论落定为哪种状态，都不可逆 。也 不能保证期约必然会脱离待定状态。

    期约的 状态是公有的，不能间接通过 JavaScript 检测到。（防止依据读取到的期约状态，以同步形式解决期约对象）。期约的状态也不能被内部 JavaScript 代码批改。

    期约将异步行为封装起来，从而断绝内部的同步代码。

    let p1 = new Promise((resolve, reject) => resolve());
setTimeout(console.log, 0, p1);
// Promise {<fulfilled>: undefined}     Chrome 控制台
// Promise {undefined}       node 运行
let p2 = new Promise((resolve, reject) => reject());
setTimeout(console.log, 0, p2);
// Uncaught (in promise) undefined    Chrome 控制台
// Promise {<rejected>: undefined}
// UnhandledPromiseRejectionWarning: undefined    node 运行
// Promise {<rejected> undefined}

  2. 解决值、回绝理由及期约用例（用处）

    期约次要有两大用处:

    • 抽象地示意一个异步操作。期约的状态代表期约是否实现，兑现还是回绝。

      某些状况下，这个状态机就是期约能够提供的最有用的信息。（晓得一段异步代码曾经实现）

    • 期约封装的异步操作会理论生成某个值，而程序期待期约状态扭转时能够拜访这个值，或是期约被回绝时，期待期约状态扭转时能够拿到回绝的理由

    为了反对这两种用例，每个期约只有状态切换为兑现，就会有一个公有的外部值（value）；每个期约只有状态切换为回绝，就会有一个公有的外部理由（reason）。无论值还是理由，都是蕴含原始值或者对象的不可批改的援用。两者都为可选，且默认值为 undefined。

    在期约达到某个落定状态时执行的异步代码会收到这个值或理由。

  3. 通过执行器函数管制期约状态（状态转换）

    期约的状态是公有的，所以只能在外部进行操作。

    外部操作在 期约的执行器函数 中实现。

    执行器函数次要有两项职责 ： 初始化 期约的异步行为和 管制 状态的最终转换。管制期约状态的转换是通过调用它的两个函数参数实现的。这两个函数参数通常命名为 resolve()和 reject()。调用 reject()会抛出谬误。

    执行器函数是同步执行的；因为执行器函数是期约的初始化程序。

    无论 resolve()和 reject()中的哪个被调用，状态转换都不可撤销。持续批改状态会静默失败。

    为防止期约卡在待定状态，能够增加一个定时退出性能。如，通过 setTimeout 设置一个 10 秒后无论如何都会回绝期约的回调。（超时解决）

    /* executor 函数在其余同步代码执行之后会同步执行 */
new Promise(()=> setTimeout(console.log, 0, 'executor'));
setTimeout(console.log, 0, 'promise initialized');
// executor
// promise initialized

/*
let p = new Promise((resolve, reject) => setTimeout(resolve, 1000));
setTimeout(console.log, 0, p); // Promise {<pending>}*/

/* 落定的状态不可撤销
let p = new Promise((resolve, reject) => {resolve();
    reject();});
setTimeout(console.log, 0, p); // Promise {<fulfilled>: undefined}*/

/* 定时退出，防止期约卡在待定状态
let p = new Promise((resolve, reject) => {setTimeout(reject, 10000);
});
setTimeout(console.log, 0, p);
setTimeout(console.log, 11000, p);
// Promise {<pending>}
// (10 秒后)
// Uncaught (in promise) undefined
// (1 秒后)
// Promise {<rejected>: undefined}*/

  4. 同步 / 异步执行的二元性（交互）

    两种模式下抛出谬误的解决。通过 try/catch 无奈捕捉 reject 的谬误。没有通过 异步模式 捕捉谬误。

    期约真正的异步个性：它们是同步对象（在同步执行模式中应用），但也是异步执行模式的媒介。

    回绝期约的谬误并没有抛到执行同步代码的线程里，而是通过 浏览器异步音讯队列 来解决的。代码一旦开始以异步模式执行，惟一与之交互的形式就是应用异步构造——期约的办法。

期约的静态方法

  • Promise.resolve()

    能够实例化一个解决的期约。

    这个解决的期约的值对应着传给 Promise.resolve()的第一个参数，多余的参数会被疏忽。实际上，这个静态方法能够把任何值都转换为一个期约。

    • 参数是一个期约：相当于透传，失去的期约为参数自身
    • 参数是非期约值（包含谬误对象）：将参数转换为解决的期约
    /*
// Promise.resolve
// 参数为期约值时，等于透传 => 幂等
// 参数为非期约值时，将其转换为解决的期约（实例化一个解决的期约）let p1 = new Promise((resolve, reject) => resolve());
let p2 = Promise.resolve();
setTimeout(console.log, 0, p1);
// Promise {<fulfilled>: undefined}
//     __proto__: Promise
//     [[PromiseState]]: "fulfilled"
//     [[PromiseResult]]: undefined
setTimeout(console.log, 0, Promise.resolve(3));
// Promise {<fulfilled>: 3}
//     __proto__: Promise
//     [[PromiseState]]: "fulfilled"
//     [[PromiseResult]]: 3

console.log(p1 === Promise.resolve(p1)); // true
console.log(Promise.resolve(9)); // Promise {<fulfilled>: 9}*/

  • Promise.reject()

    能够实例化一个回绝的期约并抛出一个异步谬误（不能通过 try/catch 捕捉）。

    这个回绝的期约的理由就是传给 Promise.reject()的第一个参数。这个参数也会传给后续的回绝处理程序。

    • 参数不管是否期约值，都会成为返回的回绝期约的理由
    // Promise.reject
// 实例化一个回绝的期约并抛出一个异步谬误，参数为回绝的理由。// 这个参数会持续传给后续的回绝处理程序
let p = Promise.reject(3);
setTimeout(console.log, 0, p); // Promise {<rejected> 3}
p.then(null, (e)=>setTimeout(console.log, 0, e)); // 3

p = Promise.reject(Promise.resolve());
// Promise {<rejected>: Promise}
// Uncaught (in promise) Promise {<fulfilled>: undefined}
setTimeout(console.log, 0, p); // Promise {<rejected> Promise { undefined} }
// Promise {<rejected>: Promise}
p.then(null, (e)=>setTimeout(console.log, 0, e)); // Promise {<fulfilled>: undefined}

期约的实例办法

期约实例的办法是连贯 内部同步代码与外部异步代码 之间的 桥梁。

这些办法能够 拜访 异步操作返回的数据，解决 期约胜利和失败的输入（onResolved 或 onRejected），间断对期约求值 （间断调用 then、catch 或 finally），或者增加只有期约 进入终止状态时 才会执行的代码（onFinally）。

  1. Thenable 接口

    在 ECMAScript 裸露的异步构造中，任何对象都有一个 then()办法。这个办法被认为实现了 Thenable 接口。

    ECMAScript 的 Promise 类型实现了 Thenable 接口。

  2. Promise.prototype.then()

    为期约实例增加处理程序的次要办法 。 接管最多两个参数：onResolved 处理程序和 onRejected 处理程序。都是可选的，如果提供的话，则会在期约别离进入”兑现“和”回绝“状态时执行。

    因为期约只能转换为最终状态一次，所以这两个操作肯定是互斥的。传给 then()的任何非函数类型的参数都会被静默疏忽。

    如果想只提供 onRejected 参数，就要在 onResolved 参数的地位上传入 null。=> 有助于防止在内存中创立多余的对象，对期待函数参数的类型零碎也是一个交代。

    返回一个新的期约实例。

    • 若期约还没有落定，就是一个 pending 中的期约实例。

    • 若期约实例的状态落定为 resolve。

      1. 没有 onResolved 处理程序，返回期约实例的副本期约（不相等，但状态同步）。

      2. 有就应用 onResolved 处理程序的返回值，通过 Promise.resolve()包装来生成新期约（非期约值包装成解决的期约，期约值包装成它的副本期约）。

        如果没有显式的返回值，就包装默认的返回值 undefined。

        如果 onResolved 处理程序抛出异样(throw)，就返回一个回绝的期约实例。

    • 若期约实例的状态落定为 reject，就应用 onRejected 处理程序的返回值 ，通过 Promise.resolve() 包装来生成新期约。

      1. 没有 onRejected 处理程序，返回期约实例的副本期约（不相等，但状态同步）。

      2. 有就应用 onRejected 处理程序的返回值，通过 Promise.resolve()包装来生成新期约（非期约值包装成解决的期约，期约值包装成它的副本期约）。

        如果没有显式的返回值，就包装默认的返回值 undefined。

        如果 onRejected 处理程序抛出异样(throw)，就返回一个回绝的期约实例。

        /*
Promise.prototype.then()
返回一个新的期约实例。若期约还没有落定，就是一个 pending 中的期约实例。若期约实例的状态落定为 resolve，就是被 onResolved 处理程序的返回值 通过 Promise.resolve()包装来生成新期约。如果 onResolve 处理程序抛出异样(throw)，就返回回绝的期约

若期约实例的状态落定为 reject，就是被 onRejected 处理程序的返回值 通过 Promise.resolve()包装来生成新期约。*/
// function onResolved(id) {//     setTimeout(console.log, 0, id, 'resolved');
// }
// function onRejected(id) {//     setTimeout(console.log, 0, id, 'rejected');
// }
// let p1 = new Promise((resolve, reject) => setTimeout(resolve, 1000));
// let p2 = new Promise((resolve, reject) => setTimeout(reject, 1000));
// /*p1.then('not function test');*/ p1.then(() => onResolved('p1'), () => onRejected('p1')); // p1 resolved
// p2.then(null, () => onRejected('p2')); // p2 rejected

/*
let p1 = Promise.resolve('foo');
// 没有 onResolve 处理程序，通过 Promise.resolve()包装期约实例来生成新期约。let p2 = p1.then();
setTimeout(console.log, 0, p1); // Promise {'foo'}
setTimeout(console.log, 0, p2); // Promise {'foo'}
console.log(p1 === p2); // false
// onResolve 处理程序没有显式返回，就把默认的返回值 undefined 包装成期约
// 否则，就把返回的值包装成期约（非期约值包装成解决的期约，期约值包装成它的副本期约）// 如果处理程序抛出异样(throw)，就返回回绝的期约
let p3 = p1.then(() => undefined);
let p4 = p1.then(() => {}); // 无返回值
let p5 = p1.then(() => Promise.resolve());
setTimeout(console.log, 0, p3); // Promise {undefined} => Promise.resolve(undefined)
setTimeout(console.log, 0, p4); // Promise {undefined} => Promise.resolve(undefined)
setTimeout(console.log, 0, p5); // Promise {undefined} => Promise.resolve(Promise.resolve())
let p6 = p1.then(() => 'bar');
let p7 = p1.then(() => Promise.resolve('bar'));
setTimeout(console.log, 0, p6); // Promise {'bar'} => Promise.resolve('bar')
setTimeout(console.log, 0, p7); // Promise {'bar'} => Promise.resolve(Promise.resolve('bar'))
let p8 = p1.then(() => new Promise(() => {}));
setTimeout(console.log, 0, p8); // Promise {<pending>}
let p9 = p1.then(() => Promise.reject());
setTimeout(console.log, 0, p9); // Promise {<rejected> undefined}
let p10 = p1.then(() => { throw 'baz'});
setTimeout(console.log, 0, p10); // Promise {<rejected> 'baz'}
let p11 = p1.then(() => Error('qux'));
setTimeout(console.log, 0, p11);
// Promise {
//     Error: qux
//     at .../c11-promise+async.js:155:25
//     at processTicksAndRejections (internal/process/task_queues.js:93:5)
// }
*/

/*
let p1 = Promise.reject('foo');
// 没有 onRejected 处理程序，p2 就是 p1 的副本期约
let p2 = p1.then();
// Uncaught (in promise) foo
setTimeout(console.log, 0, p2); // Promise {<rejected>: "foo"}
let p3 = p1.then(null, () => undefined);
let p4 = p1.then(null, () => {});
let p5 = p1.then(null, () => Promise.resolve());
setTimeout(console.log, 0, p3); // Promise {<fulfilled>: undefined}
setTimeout(console.log, 0, p4); // Promise {<fulfilled>: undefined}
setTimeout(console.log, 0, p5); // Promise {<fulfilled>: undefined}
let p6 = p1.then(null, () => 'bar');
let p7 = p1.then(null, () => Promise.resolve('bar'));
setTimeout(console.log, 0, p6); // Promise {<fulfilled>: "bar"}
setTimeout(console.log, 0, p7); // Promise {<fulfilled>: "bar"}
let p8 = p1.then(null, () => new Promise(() => {}));
setTimeout(console.log, 0, p8); // Promise {<pending>}
let p9 = p1.then(null, () => Promise.reject());
// Uncaught (in promise) undefined
setTimeout(console.log, 0, p9); // Promise {<rejected>: undefined}
let p10 = p1.then(null, () => {throw 'baz'});
// Uncaught (in promise) baz
setTimeout(console.log, 0, p10); // Promise {<rejected>: "baz"}
let p11 = p1.then(null, () => Error('qux'));
setTimeout(console.log, 0, p11);
// Promise {<fulfilled>: Error: qux
//     at <anonymous>:3:31}*/

  3. Promise.prototype.catch()

    用于给期约增加回绝处理程序。只接管一个参数：onRejected 处理程序。

    语法糖，相当于Promise.prototype.then(null, onRejected)。

    返回一个新的期约实例。

    /*
    Promise.prototype.catch()
let pp = Promise.reject();
let onRejected = function (e) {setTimeout(console.log, 0, 'rejected');
};
pp.then(null, onRejected); // rejected
pp.catch(onRejected); // rejected
let p1 = new Promise(() => {});
let p2 = p1.catch();
setTimeout(console.log, 0, p2); // Promise {<pending>}*/

  4. Promise.prototype.finally()

    用于给期约增加 onFinally 处理程序。这个处理程序在期约转换为解决或回绝状态时都会执行。能够防止 onResolved 和 onRejected 处理程序中呈现冗余代码。不晓得期约的状态是解决还是回绝，次要用于增加清理代码。

    返回一个新期约实例。

    少数状况下，返回的是原期约实例的正本 ；
    若 onFinally 返回的是一个待定的期约，或是回绝的期约（或抛出异样），则返回相应状态的期约实例。如果返回的待定的期约状态落定了，新期约还是会转换为原期约实例的正本。

    /*
* Promise.prototype.finally()
* 返回一个新期约实例。* 少数状况下，返回的是原期约实例的正本；* 若 onFinally 返回的是一个待定的期约，或是回绝的期约（或抛出异样），则返回相应状态的期约实例。如果待定的期约状态落定了，新期约还是会转换为原期约实例的正本。* */
let p1 = Promise.resolve();
let p2 = Promise.reject();
let onFinally = function () {setTimeout(console.log, 0, 'Finally!');
};
p1.finally(onFinally); // Finally!
p2.finally(onFinally); // Finally!
/*
p1 = Promise.resolve('foo');
p2 = p1.finally(() => new Promise((resolve, reject)=> setTimeout(()=> resolve('bar'), 100)));
setTimeout(console.log, 0, p2); // Promise {<pending>}
setTimeout(()=> setTimeout(console.log, 0, p2), 200); // Promise {'foo'}*/

  5. 执行程序

    当期约进入落定状态时，与该状态相干的处理程序仅仅会被排期，而非立刻执行。即便期约一开始就是与附加处理程序关联的状态，执行程序也是这样的。这个个性由 JavaScript 运行时保障，被称为”非重入“（non-reentrancy）个性。

    跟在实例办法之后的同步代码，肯定会在处理程序之前先执行。

    在一个解决期约上调用 then()会把 onResolved 处理程序 推动 音讯队列。（在以后线程上的同步代码执行实现前不会执行）。处理程序会等到运行的音讯队列让它出列时才会执行。

    如给期约 增加了多个处理程序 ，当期约状态变动时，相干处理程序会 依照增加它们的程序 顺次执行。

  6. 传递解决值和回绝理由

    到了落定状态后，期约会提供其解决值（兑现）或其回绝理由（回绝）给相干状态的处理程序。

    在执行器函数（executor）中，解决的值和回绝的理由是别离作为 resolve()和 reject()的第一个参数往后传的 。而后，这些值会传给它们各自的处理程序，作为 onResolved 或 onRejected 处理程序的 惟一 参数。

    Promise.resolve()和 Promise.reject()在被调用时就会接管解决值和回绝理由。它们返回的期约也会像执行器一样把这些值传给 onResolved 或 onRejected 处理程序。

    /*
p1 = new Promise(((resolve, reject) => resolve('foo')));
p1.then((value => console.log(value))); // foo
p2 = new Promise(((resolve, reject) => reject('bar')));
p2.catch(reason => console.log(reason)); // bar*/

  7. 回绝期约与回绝错误处理

    回绝期约相似于 throw()表达式，因为它们都代表一种程序状态，即须要中断或者非凡解决。

    在期约的执行器函数（executor）或处理程序中抛出谬误会导致回绝，对应的谬误对象会成为回绝的理由。

    期约能够以任何理由回绝，包含 undefined，但最好对立应用谬误对象。（创立谬误对象能够让浏览器 捕捉谬误对象中的栈追踪信息，而这些信息对调试是十分要害的。）

    在期约中抛出谬误时（throw Error('error message');），因为谬误实际上是从音讯队列中异步抛出的，所以并不会阻止运行时继续执行同步指令。异步谬误只能通过异步的 onRejected 处理程序捕捉。

    注！：在解决或回绝期约之前，依然能够应用 try/catch 在执行函数中捕捉谬误。

    onRejected 处理程序在语义上相当于 try/catch。出发点都是捕捉谬误之后将其隔离，同时不影响失常逻辑执行。故，onRejected 处理程序的工作应该是在捕捉异步谬误之后返回一个解决的期约。

期约连锁与期约合成

  1. 期约连锁

    把期约一一地串联起来。（每个期约实例的办法都会返回一个新的期约对象）

    每个处理程序都返回一个期约实例。就能够让每个后续期约都期待之前的期约，也就是 串行化异步工作。解决之前依赖回调的难题（回调天堂），直观。

    let pp1 = new Promise(((resolve, reject) => {console.log('p1 executor');
    setTimeout(resolve, 1000);
}));
pp1.then(() => new Promise((resolve, reject) => {console.log('p2 executor');
    setTimeout(resolve, 1000);
}))
    .then(() => new Promise(((resolve, reject) => {console.log('p3 executor');
        setTimeout(resolve, 1000);
    })))
    .then(() => new Promise(((resolve, reject) => {console.log('p4 executor');
        setTimeout(resolve, 1000);
    })));

function delayedExecute(str, callback=null) {setTimeout(()=> {console.log(str);
        callback && callback();}, 1000);
}
delayedExecute('p1 callback', ()=> {delayedExecute('p2 callback', ()=> {delayedExecute('p3 callback', ()=> {delayedExecute('p4 callback');
        });
    });
});

  2. 期约图

    因为一个期约能够有任意多个处理程序，所以期约连锁能够构建 有向非循环图 的构造。

    图中的每个节点都会期待前一个节点落定，所以图的方向就是期约的解决或回绝程序。

    因为期约的处理程序是 先增加到音讯队列，而后 才一一执行，因而形成了层序遍历。

    // 有向非循环。层序遍历。let A = new Promise(((resolve, reject) => {console.log('A');
    resolve();}));
let B = A.then(()=> console.log('B'));
let C = A.then(()=> console.log('C'));
B.then(()=> console.log('D'));
B.then(()=> console.log('E'));
C.then(()=> console.log('F'));
C.then(()=> console.log('G'));
A.then(()=> console.log('H'));
// A
// B
// C
// H
// D
// E
// F
// G

  3. Promise.all()和 Promise.race()

    将两个或多个期约实例 组合 成一个期约的静态方法。

    • Promise.all()

      创立的期约会在一组期约全副解决之后再解决。接管一个可迭代对象（必传），返回一个新期约。

      Promise.all([])等价于Promise.resolve([])。

      可迭代对象中的（非期约）元素会通过 Promise.resove()转换为期约。

      • 每个蕴含的期约都解决才解决。合成期约的解决值就是所有蕴含期约解决值的数组，依照迭代器程序。
      • 如果至多有一个蕴含的期约待定，则合成的期约也会待定（无回绝期约时）

      • 如果有一个蕴含的期约回绝，则合成的期约也会回绝。第一个回绝的期约会将本人的理由作为合成期约的回绝理由。其余蕴含期约的回绝操作会被静默解决，通过 onRejected 处理程序后，不会抛出异步谬误。

        let ppp = new Promise(((resolve, reject) => reject('ppp')));
let ppp1 = new Promise(((resolve, reject) => reject('ppp1')));
let all = Promise.all([new Promise(((resolve, reject) => setTimeout(reject, 1000))),
  ppp,
  ppp1
]);
all.catch(reason => setTimeout(console.log, 0, 2, reason));
ppp1.then((value)=> console.log(value), (reason)=> console.log(11, reason));
ppp.then((value)=> console.log(value), (reason)=> console.log(1, reason));
// 11 "ppp1"
// 1 "ppp"
// 2 "ppp"

    • Promise.race()

      接管一个可迭代对象（必传），返回一个包装期约 ，是一组汇合中 最先 解决或回绝的期约的镜像。

      可迭代对象中的（非期约）元素会通过 Promise.resove()转换为期约。

      Promise.race([])等价于new Promise(()=>{})。

      只有是第一个落定的期约，Promise.race()就会包装其解决值或回绝理由并返回新期约。

      所有蕴含期约的回绝操作会被静默解决，通过 onRejected 处理程序后，不会抛出异步谬误。

  4. 串行期约合成

    期约连锁：期约的串行执行。期约的另一个次要个性：异步产生值并将其传给处理程序。基于后续期约应用之后期约的返回值来串联期约是期约的基本功能。

    能够提炼出一个通用函数，把任意多个函数作为处理程序合成一个间断传值的期约连锁。这个通用的合成函数能够这样实现：

    function compose(...fns) {return x => fns.reduce((promise, fn) => promise.then(fn), Promise.resolve(x));
}

 // 应用
 function addTwo(x) {return x + 2};
 function addThree(x) {return x + 3};
 function addFive(x) {return x + 5};
 let addTen = compose(addTwo, addFive, addThree);
 addTen(8).then(console.log); // 18

期约扩大

ES6 期约的不足之处：期约勾销和进度追踪。

  1. 期约勾销

    场景：期约正在处理过程中，程序却不再须要其后果。

    ES6 期约：只有期约的逻辑开始执行，就没有方法阻止它执行到实现。

    实现：能够在现有实现根底上提供一种临时性的封装，以实现勾销期约的性能。”勾销令牌“（cancel token）。

    class CancelToken {constructor(cancelFn) {this.promise = new Promise((resolve, reject) => {cancelFn(resolve);
    })
  }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise Extend</title>
</head>
<body>
<button id="start">Start</button>
<button id="cancel">Cancel</button>
<script>
    class CancelToken {constructor(cancelFn) {this.promise = new Promise(((resolve, reject) => {cancelFn(() => {setTimeout(console.log, 0, "delay cancelled");
                    resolve();});
            }));
        }
    }
    const startButton = document.querySelector('#start');
    const cancelButton = document.querySelector('#cancel');

    function cancellableDelayedResolve(delay) {setTimeout(console.log, 0, "set delay");
        return new Promise((resolve, reject) => {const id = setTimeout(() => {setTimeout(console.log, 0, "delayed resolve");
                resolve();}, delay);
            // 实例化一个 cancelToken 的实例，关联了一个 Promise 实例。// 这个 Promise 实例初始化时，执行器函数给 cancel 按钮增加了 click 事件监听回调函数。// 当 cancel 按钮点击时，关联的 Promise 实例就被兑现了，并打印出 "delay cancelled"。const cancelToken = new CancelToken((cancelCallback) => cancelButton.addEventListener("click", cancelCallback));
            // 当 cancelToken 实例关联的 Promise 实例被兑现后，then 对应的处理程序中清空计时器，以后的 Promise 实例的状态就不会被落定兑现。cancelToken.promise.then(() => clearTimeout(id));
        })
    }
    // 给 start 按钮增加了 click 事件监听回调函数
    // 当 start 按钮点击时，cancellableDelayedResolve 函数被执行，// 打印出 "set delay"，并通过执行器函数初始化一个 Promise 实例，// 1000 毫秒后该 Promise 实例会被兑现。startButton.addEventListener("click", () => cancellableDelayedResolve(1000));
</script>
</body>
</html>

    在一个 Promise 实例的执行器中，初始化一个令牌实例，通过触发令牌实例中的期约解决，，在其 onResolved 处理程序中勾销执行这个 Promise 实例的 resolve。

  2. 进度追踪

    场景：监控期约的执行进度。ES6 期约不反对进度追踪。

    class TrackablePromise extends Promise {constructor(executor) {const notifyHandlers = [];
        super((resolve, reject) => {return executor(resolve, reject, (status) => {notifyHandlers.map((handler) => handler(status)); // 所有的 notifyHandlers 执行一遍
            });
        });
        this.notifyHandlers = notifyHandlers;
    }
    notify(notifyHandler) {this.notifyHandlers.push(notifyHandler);
        return this;
    }
}

let p = new TrackablePromise((resolve, reject, notify) => {function countdown(x) {if (x > 0) {notify(`${20 * x}% remaining`);
            setTimeout(() => countdown(x - 1), 1000);
        } else {resolve();
        }
    }
    countdown(5);
});
p.notify(x => setTimeout(console.log, 0, 'progress:', x))
 .notify(x => setTimeout(console.log, 0, 'progress1:', x));
p.then(() => setTimeout(console.log, 0, 'completed'));

ES6 不反对勾销期约和进度追踪，一个次要起因是这样会导致期约连锁和期约合成适度复杂化。

异步函数（async/await）

跟期约联合，以同步形式编写异步代码，不便谬误的捕捉和管制。

ES8 新增。从行为和语法上加强 JavaScript。

如果程序中的其余代码要在一个期约的解决值可用时拜访它，则须要写一个解决处理程序。=> 其余代码都必须赛到期约处理程序中、以处理程序的模式来接管这个值。

异步函数

解决 利用异步构造组织代码的问题。

  1. async

    用于 申明 异步函数。始终返回期约对象。

    能够让函数具备异步特色，但总体上其代码依然是同步求值。（相似 Promise 实例的执行器函数？）

    /*
async function foo() {console.log(1);
}
foo();
console.log(2);
// 1
// 2*/

    如果异步函数应用 return 关键字返回了值（没有显式的 return 默认返回 undefined），这个值会被 Promise.resolve()包装成一个期约对象。

    async function foo() {console.log(1);
    return Promise.resolve(3); // 3;
}
foo().then(console.log);
console.log(2);

async function bar() {return ['bar'];
}
bar().then(console.log);
// 1
// 2
// ['bar']
// 3
/*
1. 先执行同步代码，打印 1，把 Promise.resolve 落定后执行的工作插入音讯队列
2. 执行同步代码，打印 2
3. 把 bar().then()的工作插入音讯队列
4. 实现 Promise.resolve 落定后执行的工作出列执行，把 foo().then()的工作插入音讯队列
5. 把 bar().then()的工作出列执行：打印['bar']
6. 把 foo().then()的工作出列执行：打印 3
 */

    异步函数的返回值期待一个实现 Thenable 接口的对象，但惯例的值也可 。如果返回的是实现 Thenable 接口的对象，能够由提供给 then() 的处理程序”解包“；如果不是，则返回值就被当作曾经解决的期约。

    async function baz() {
    const thenable = {then(callback) {callback('baz');
        }
    };
    return thenable;
}
baz().then(console.log);
// baz

async function qux() {return Promise.resolve('qux');
}
qux().then(console.log); // qux

    在异步函数中抛出谬误 ，会返回回绝的期约；如果 呈现某落定为回绝的期约实例（不是返回值），就会抛出异步谬误（不能通过异步函数 ().catch() 捕捉到）。

    async function foo1() {console.log(11);
    throw 33;
}
foo1().catch(console.log); // 33 onRejected 处理程序打印

async function foo2() {console.log(111);
    // console.log('await', await Promise.resolve(333) );
    Promise.reject(333);
    console.log(334);
}
foo2().catch(console.log);
console.log(222);
// 111
// 334
// 222
// (node:86722) UnhandledPromiseRejectionWarning: 333

// 如果在 Promise.reject(333); 后面加上 await 后果就不一样了
// 111
// 222
// 333 
// 334 的打印不会被执行到

  2. await

    因为异步函数次要针对不会马上实现的工作，所以须要一种 暂停和复原执行的能力。

    async function foo() {console.log(await Promise.resolve('foo'));
}
foo(); // foo

    应用 await 关键字能够暂停异步函数代码的执行，期待期约解决。与生成器函数中的 yield 关键字是一样的。

    async function bar() {return await Promise.resolve('bar');
}
bar().then(console.log); // bar

async function baz() {await new Promise((resolve, reject) => setTimeout(resolve, 1000));
    console.log('baz');
}
baz(); // (1 秒后)baz

    await 关键字同样 尝试”解包“对象的值，而后将这个值传给表达式，再异步复原异步函数的执行。（能够独自应用，也能够在表达式中应用）。

    async function foo1() {console.log(await 'foo1');
}
foo1();
async function bar1() {console.log(await ['bar1']);
}
bar1();

    await 关键字期待一个实现 Thenable 接口的对象，但惯例的值也可。如果是实现 Thenable 接口的对象，则这个对象能够由 await 来”解包“；如果不是，这个值就被当作曾经解决的期约。

    async function baz1() {
    const thenable = {then(callback) {callback('baz1');
        }
    };
    console.log(await thenable);
}
baz1();

    await后跟会抛出谬误的同步操作（或者某落定为回绝的期约实例），异步函数会返回回绝的期约（回绝理由为抛出的错误信息或回绝的期约的理由）；后续的代码不会被执行。

    async function fooT() {console.log(1);
    await (() => {throw 33;})();}
fooT().catch(console.log);
console.log(2);

  3. await 的限度

    await 关键字必须在异步函数中应用。

    异步函数的特质不会扩大到嵌套函数。因而，await 关键字只能间接呈现在异步函数的定义中。在同步函数外部应用 await 会抛出 SyntaxError。

进行和复原执行

async/await 中真正起作用的是 await。异步函数如果不蕴含 await 关键字，其执行基本上跟一般函数没有什么区别。

JavaScript 运行时在碰到 await 关键字时，会记录在哪里暂停执行。等到 await 左边的值可用了，JavaScript 运行时会向音讯队列中推送一个工作 ，这个工作会 复原异步函数的执行。

所以，即便 await 前面跟着一个立刻可用的值，函数的其余部分也会被异步求值。

如果 await 前面是一个期约，则问题会略微简单一些。为了执行异步函数，实际上会有两个工作被增加到音讯队列并被异步求值。（Promise 落定后执行的工作，给 await 提供值的工作）

async function test() {console.log(await Promise.resolve().then(() => 'test'));
}
test();

(async function() {console.log(await Promise.resolve(331));
})();

// test
// 331

异步函数策略

  1. 实现相似 Java 中的 Thread.sleep()

    在程序中退出非阻塞的暂停。不影响内部的同步代码执行。

    async function sleep(delay) {return new Promise((resolve => setTimeout(resolve, delay)));
}
async function foox() {const t0 = Date.now();
    await sleep(1500);
    console.log('diff', Date.now() - t0); // diff 1504
}
console.log(5);
foox();

  2. 利用平行执行

    平行减速。（并行执行，程序应用后果，有点像 Promise.all？）

    就算期约之间没有依赖，异步函数中的 await 也会顺次暂停，期待每个实现。这样能够保障执行程序，但总执行工夫会变长。

    如果程序不是必须保障的，则能够先一次性初始化所有期约，而后再别离期待它们的后果。

    期约尽管 没有依照程序执行 ，然而 await 按程序 收到了每个期约的值。

    async function randomDelay(id) {const delay = Math.random() * 1000;
    return new Promise((resolve) => setTimeout(() => {console.log(`${id} finished`);
        resolve(id);
    }, delay));
}
async function fooy() {const t0 = Date.now();
    /*const p0 = randomDelay(0);
    const p1 = randomDelay(1);
    const p2 = randomDelay(2);
    const p3 = randomDelay(3);
    const p4 = randomDelay(4);
    await p0;
    await p1;
    await p2;
    await p3;
    await p4;*/
    const promises = Array(5).fill(null).map((_, i) => randomDelay(i));
    for (const p of promises) {console.log(`awaited ${await p}`);
    }
    /*for(let i = 0; i < 5; ++ i) {await randomDelay(i);
    }*/
    console.log(`${Date.now() - t0}ms elapsed`);
}
fooy();

  3. 串行执行期约

    后面 Promise 局部，串行执行期约并把值传给后续的期约。

    await 间接传递了每个函数的返回值（onResolved 处理程序接管到的参数），后果通过迭代产生。

    function compose(...fns) {return async (x)=> {for (const fn of fns) {x = await fn(x);
    }
    return x;
  }
}

 /*async */function addTwo(x) {return x + 2;}
 /*async */function addThree(x) {return x + 3;}
 /*async */function addFive(x) {return x + 5;}
 async function addTen(x) {for(const fn of [addTwo, addThree, addFive]) {x = await fn(x);
     }
     return x;
 }
 addTen(9).then(console.log); // 19

  4. 栈追踪与内存治理

    期约与异步函数的性能有相当程度的重叠，但它们在内存中的示意则差异很大。

    • 回绝期约的栈追踪信息：

      蕴含嵌套函数（执行器函数）的标识符，这些函数曾经返回，因而栈追踪信息中不应该看到它们。（JavaScript 引擎会在创立期约时尽可能保留残缺的调用栈。）意味着栈追踪信息会占用内存，从而带来一些计算和存储老本。

    • 异步函数的栈追踪信息：

      援用的 Promise 实例的执行器函数不在错误信息中。但异步函数此时被挂起，并没有退出。JavaScript 运行时能够简略地在嵌套函数中存储指向蕴含函数（异步函数？）的指针。

小结

能够针对异步行为，写出更清晰、简洁，并且容易了解、调试的代码。

期约次要性能，为异步代码提供了清晰的形象。能够用期约示意异步执行的代码块，也能够用期约示意异步计算的值。须要串行异步代码时，期约能够连锁应用、复合、扩大和重组。

异步函数能够暂停执行，而不阻塞主线程。

正文完
前端
发表至： 前端
2022-10-25
 0
关于前端:六函数
关于前端:vue提升加载速度的方法
Sass学习笔记2-进阶篇
关于前端:display-none与visibility-hidden的区别