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()
- Promise 实例有一个 then 方法,用来指定下一步的回调函数。
- 所有异步任务都返回一个 Promise 实例。
-
- 不仅改善了可读性,而且对于多层嵌套的回调函数尤其方便。
- 传统的写法可能需要把 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); // 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); // 3 // 2 // 1
-
输出结果是321。这说明 then 的回调函数的执行时间,早于setTimeout(fn, 0)。
-
因为 then 是本轮事件循环执行,setTimeout(fn, 0)在下一轮事件循环开始时执行
- Promise 的回调函数属于异步任务,会在同步任务之后执行。