正文
(84)Wangdao.com第十八天_JavaScript Promise 对象
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Promise 对象
是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。
目前 JavaScript 原生支持 Promise 对象
它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。
Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。
- Promise 是一个对象，也是一个构造函数
function f1(resolve, reject) {
// 异步代码...
}var p1 = new Promise(f1);
//Promise构造函数接受一个回调函数f1()作为参数，f1()里面是异步操作的代码。然后，返回的p1就是一个 Promise 实例
- Promise 的设计思想是
- 所有异步任务都返回一个 Promise 实例。
- Promise 实例有一个 then 方法，用来指定下一步的回调函数。
var p1 = new Promise(f1);
p1.then(f2);f1() 的异步操作执行完成，就会执行 f2()
- 不仅改善了可读性，而且对于多层嵌套的回调函数尤其方便。
- 传统的写法可能需要把 f2() 作为回调函数传入 f1()，比如写成f1(f2)，异步操作完成后，在 f1() 内部调用 f2()。
- 而 Promise 使得 f1() 和 f2() 变成了链式写法。
// 传统写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// ...
});
});
});
});// Promise 的写法
(new Promise(step1)).then(step2).then(step3).then(step4);
- 不仅改善了可读性，而且对于多层嵌套的回调函数尤其方便。
- 通过自身的状态，来控制异步操作。
- Promise 实例具有三种状态：
- 异步操作未完成（pending）
- 异步操作成功（fulfilled）
- 异步操作失败（rejected）
- 上面三种状态里面，fulfilled 和 rejected合在一起称为 resolved（已定型）。
- 这三种的状态的变化途径只有两种：
- 从 “未完成” 到 “成功”
- 从 “未完成” 到 “失败”
- 它的英语意思是“承诺”，一旦承诺成效，就不得再改变了。
- 一旦状态发生变化，就凝固了，不会再有新的状态变化。
- 这也意味着，Promise 实例的状态变化只可能发生一次。
- Promise 构造函数
- JavaScript 提供原生的 Promise 构造函数，用来生成 Promise 实例
var promise = new Promise(function (resolve, reject) {
// ... if (/* 异步操作成功 */){
resolve(value);
} else { /* 异步操作失败 */
reject(new Error());
}
});
// 该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己实现resolve() 函数
作用是，将Promise实例的状态从“未完成”变为“成功”（即从pending变为fulfilled）
在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
reject函数
作用是，将Promise实例的状态从“未完成”变为“失败”（即从pending变为rejected）
在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
- 实例
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}timeout(100)上面代码中，timeout(100) 返回一个 Promise 实例。100毫秒以后，该实例的状态会变为 fulfilled
- JavaScript 提供原生的 Promise 构造函数，用来生成 Promise 实例
- Promise.prototype.then()
- Promise 实例的then方法，用来添加回调函数
- 可以接受两个回调函数，一旦状态改变，就调用相应的回调函数。
- 第一个是异步操作成功时（变为fulfilled状态）的回调函数
- 第二个是异步操作失败（变为rejected）时的回调函数（该参数可以省略）。
var p1 = new Promise(function (resolve, reject) {
resolve('成功');
});
p1.then(console.log, console.error); // "成功"var p2 = new Promise(function (resolve, reject) {
reject(new Error('失败'));
});
p2.then(console.log, console.error); // Error: 失败p1 和 p2 都是Promise 实例，它们的 then() 方法绑定两个回调函数：成功时的回调函数 console.log，失败时的回调函数 console.error（可以省略）。
p1 的状态变为成功，p2 的状态变为失败
对应的回调函数会收到异步操作传回的值，然后在控制台输出
- 实例：图片加载
- 使用 Promise 完成图片的加载
var preloadImage = function (path) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};调用
preloadImage('https://example.com/my.jpg')
.then(function (e) { document.body.append(e.target) })
.then(function () { console.log('加载成功') })
- 使用 Promise 完成图片的加载
- 强大之处：
- 让回调函数变成了规范的链式写法，程序流程可以看得很清楚。
- 它有一整套接口，可以实现许多强大的功能，
- 比如同时执行多个异步操作，等到它们的状态都改变以后，再执行一个回调函数
- 再比如，为多个回调函数中抛出的错误，统一指定处理方法等等。
- 它的状态一旦改变，无论何时查询，都能得到这个状态。
- 这意味着，无论何时为 Promise 实例添加回调函数，该函数都能正确执行。
- 所以，你不用担心是否错过了某个事件或信号。
- 如果是传统写法，通过监听事件来执行回调函数，一旦错过了事件，再添加回调函数是不会执行的。
- 微任务（Microtask）
- Promise 的回调函数属于异步任务，会在同步任务之后执行。
new Promise(function (resolve, reject) {
resolve(1);
}).then(console.log);console.log(2);
//
// 1
// 上面代码会先输出 2，再输出 1 。
// 因为 console.log(2)是同步任务，而 then 的回调函数属于异步任务，一定晚于同步任务执行
- Promise 的回调函数不是正常的异步任务，而是微任务（microtask）
- 它们的区别在于
- 正常任务追加到下一轮事件循环
- 微任务追加到本轮事件循环
- 这意味着，微任务的执行时间一定早于正常任务。
setTimeout(function() {
console.log(1);
}, 0);new Promise(function (resolve, reject) {
resolve(2);
}).then(console.log);console.log(3);
//
//
//输出结果是321。这说明 then 的回调函数的执行时间，早于setTimeout(fn, 0)。
因为 then 是本轮事件循环执行，setTimeout(fn, 0)在下一轮事件循环开始时执行
- Promise 的回调函数属于异步任务，会在同步任务之后执行。
