promise是什么promise是一个对象
“承诺将来会执行”的对象在JavaScript中称为Promise对象
Promise 是一个关联了执行任务的承诺,当你的任务完成时,会根据任务的成功与否,执行相应的操作。
用法
new Promise((resolve, reject) => setTimeout(resolve, 1000, 'foo')).then()实例
function test(resolve,reject) { setTimeout(()=>{ if(true){ resolve({data:100}) }else{ reject({data:0}) } },2000) } let p1 = new Promise(test) p1.then( res =>{ console.log(res) //{data:100} } )上述实例中test就是要执行的任务,当你的任务完成时会根据成功与否,执行相应的操作
如果成功会通过调用resolve回调,并会把执行的结果作为参数,然后可以再then里面做相应的操作
有没有很熟悉的感觉,axios和ajax都是基于promisede http库,内部都是返回了一个new Promise()对象
在使用 Promise 的时候,我们最简单的理解与用法就是像上面的代码那样,把异步结果提供给 resolve 作参数,然后通过给 then 方法传递一个自定义函数作为结果处理函数。但 resolve 和 reject 这两个参数到底是什么?在这背后,它的基本工作方式到底是怎样的呢?让我们从规范的角度来初步了解它吧。
知识点- promise 的工作机制与 callback 类似,都是异步
- Promise 构造函数里的 resolve/reject 函数是内部创建的,在调用它们时传入的参数就是要解析的结果
- Promise.prototype.then 根据当前的 promise 的状态来决定是立即将 promise 中存储的结果取出并和参数中的处理函数一起直接插入到 Job 队列中还是先与 promise 关联起来作为结果处理函数。then 会隐式调用 Promise 构建函数构建新的 promise 并返回。
- Promise.all 先创建一个新的 promise,然后先、初始化一个空的结果数组和一个计数器来对已经 resolve 的 promise进行计数,之后会进行迭代,对于每个迭代值它都会为其创造一个promise,并设定这个promise的then为向结果数组里添加结果以及计数器--,当计数器减至0时就会resolve最终结果。
Promise.all(test1,test2)两个执行任务都指向成功之后,返回一个数组,数组里面是两个任务的结果 - Promise.race 也是会创建一个新的主 promise,之后主要是根据 promise 只能 resolve 一次的限制,对于每个迭代值都会创造另一个promise,先resolve的也就会先被主 promise resolve 返回结果。返回晚的自然被废弃不用
疑问点关于promise有问题的点
Promise 对象有三种状态:pending、fullfilled 和 rejected,分别代表了 promise 对象处于等待、执行成功和执行失败状态。创建 promise 对象后处于pending状态,pending状态可以转化为fullfilled或rejected状态,但不能逆向转化,且转化过程只能有一次,即resolve或reject后不能再resolve或reject。因此需要在 promise 对象中持有状态的引用,通过添加一个名为_state(为了说明是内部属性,用户不要直接使用,属性名前加了下划线,后面同理)的属性实现。现在 Promise 构造函数定义如下:
function Promise(resolver) { this._status = 'pending';}任务(resolver)内封装了需要执行的异步操作(当然,也可以是同步操作)。同时resolver调用时会被传递两个参数:resolve和reject函数,来自于 Promise 内部的封装,分别代表任务执行成功或者失败时需要执行的操作。任务成功与否由调用者控制,且需要在成功或失败时调用resolve或reject函数,以此来标识当前 promise 对象的完成,并会触发后续 promise 的执行。
在调用Promise构造函数时,resolver会被立即调用。因此,现在Promise构造函数如下:
function Promise(resolver) { this._status = 'pending'; resolver(resolve, reject); ...}Promise 代表着一个承诺。作为承诺,总需要有一个结果,无论成功与否。如果成功,我们会获得需要的结果;当然也有可能会失败。因此我们需要在这个承诺在未来某个时刻有结果时,分别针对结果的成功或失败做相应的处理。因此 Promise 中提供了then方法来完成这个任务。then方法接收两个参数:onResolve和onReject,分别代表当前 promise 对象在成功或失败时,接下来需要做的操作。现实生活中,人们总系喜欢给出各种许诺,同样在代码的世界里,我们也经常会有一连串前后依赖的 promise 需要执行,如下面的调用方式:promise.then().then()...。因此为了方便链式调用,then方法的实现中,都会返回一个新的 promise 对象,就像 jQuery 的方法中一般都会将自己(this)返回一样(不同的是,jQuery中返回的是自身,但在 Promise 中,返回的是一个新的 promise 对象。如果此处也返回自身的话,则串行操作就变成并行操作了,显然不符合我们的目标)。因此,then方法的定义如下:
Promise.prototype.then = function(onResolve, onReject) { var promise = new Promise(function() {}); ... return promise;}此处then方法内创建的 promise 对象和暴露给用户直接调用的 Promise 构造函数所创建的 promise 对象有些不同。用户调用 Promise 构造函数时需要传递resolver参数代表与此 promise 对象关联的任务,且任务会立即执行。在未来某个时刻,用户根据任务执行的结果来判断任务是成功还是失败,并且需要调用resolver中被传入的参数resolve或reject来结束此 promise,并由此触发下一个 promise(即当前 promise 对象调用then方法所创建的 promise 对象)所关联的任务的执行。由此可知以下两点:首先then方法中创建的 promise 关联的任务不能在 promise 对象创建时立即执行,所以先传入一个空函数以符合 Promise 构造函数调用格式;其次前一个 promise 对象需要能够知道下一个 promise 对象是谁,其关联的任务是什么,这样才能在自己完成后调用下一个 promise 的任务。因此前一个 promise 需要持有下一个 promise 以及其任务的引用。由于 promise 的执行可能会成功也可能会失败,因此后一个 promise 一般会提供成功或失败后需要执行的任务供前一个 promise 调用。因此前一个 promise 持有下一个 promise 的任务引用时需要区分这一点。promise 的调用不一定都如promise.then().then()...这样的串行方式,也可以有如下的并行方式:
var promise = new Promise(xxx); promise.then(); promise.then();此时当前一个 promise 对象完成后,会同时调用两个then方法中创建的 promise 关联的任务。因此,前一个 promise 对象可能需要持有多个 promise 对象以及它们关联的成功和失败任务的引用。因此需要给 promise 对象添加属性用于这些数据的记录
此处我采用了闭包的方式实现:在 promise 对象中增加分别代表成功回调和失败回调的两个数组,数组中的每一项是通过内部封装的闭包函数调用的结果,也是一个函数。只不过这个函数可以访问到内部调用闭包时传递的 promise 对象,因此通过这种方式也可以访问到我们需要的下一个 promise 以及其关联的成功、失败回调的引用。所以现在有两处改动。首先需要在 Promise 构造函数中增加两个属性。现在 Promise 构造函数的定义如下:
function Promise(resolver) { this._status = 'pending'; this._doneCallbacks = []; this._failCallbacks = []; resolver(resolve, reject); ...}Promise.prototype.then = function(onResolve, onReject) { var promise = new Promise(function() {}); this._doneCallbacks.push(makeCallback(promise, onResolve, 'resolve')); this._failCallbacks.push(makeCallback(promise, onReject, 'reject')); return promise;}then方法中调用的makeCallback即上面说到的闭包函数。调用时会把 promise 对象以及相应的回调传递进去,且会返回一个新的函数,前一个 promise 对象持有返回函数的引用,这样在调用返回函数时,在函数内部就可以访问到 promise 对象以及回调函数了。由于成功回调onResolve和失败回调onReject都通过此闭包封装,所以在闭包中增加了第三个参数action,以区分是哪种回调。现在makeCallback的定义如下:
function makeCallback(promise, callback, action) { return function promiseCallback(value) { ... };}前面说过,调用构造函数创建 promise 对象时需要传递作为任务的函数resolver,resolver会被立即调用,并被传递参数resolve和reject函数,用于结束当前 promise 并触发接下来的 promise 的调用。下面将介绍resolve和reject函数的实现。
我们使用 promise,是期望在未来的某个时刻能获得一个结果,并且可用于接下来的 promise 调用。所以resolve函数需要有一个参数来接收结果(同样,promise 执行失败后,我们也希望在后续 promise 中获得此失败信息,做相应处理。所以reject函数也需要有一个参数来接收错误)。前面说过 promise 对象的状态只能由pending状态转换为fullfilled或rejected状态,且只能转换一次。所以resolve或reject时,需要判断一下状态。所以,现在resolve和reject函数的定义如下:
function resolve(promise, data) { if (promise._status !== 'pending') { return; } promise._status = 'fullfilled'; promise._value = data; run(promise); } function reject(promise, reason) { if (promise._status !== 'pending') { return; } promise._status = 'rejected'; promise._value = reason; run(promise); }resolve和reject函数也可以定义在 Promise 构造函数的 prototype 上,这样可直接通过promise.resolve(data)或promise.reject(reason)调用,不用传递第一个参数promise。但由于此函数是内部调用,为了不暴露不必要的接口给用户,所以定义为内部函数。由于执行时需要知道是 resolve 或 reject 哪一个 promise 对象,所以需要多一个名为promise参数。resolve和reject函数中首先判断了当前 promise 的状态,如果不是pending(即已经被 resolve 或 reject 过了,不再重复执行),则直接返回。然后赋予 promise 新的状态,并保存成功或失败的值。最后调用run函数。run函数用于触发接下来的 promise 的执行。run函数中需要注意的一点是,需要异步执行相关的回调函数。run函数的定义如下:
function run(promise) { // `then`方法中也会调用,所以此处仍需做一次判断 if (promise._status === 'pending') { return; } var value = promise._value; var callbacks = promise._status === 'fullfilled' ? promise._doneCallbacks : promise._failCallbacks; // Promise需要异步操作 setTimeout(function () { for (var i = 0, len = callbacks.length; i < len; i++) { callbacks(value); } }); // 每个promise只能被执行一次。虽然`_doneCallbacks`和`_failCallbacks`用户不应该直接访问, // 但还是可以访问到,保险起见,做清空处理。 promise._doneCallbacks = []; promise._failCallbacks = []; }run函数中调用的 callback,就是前面闭包函数makeCallback返回的函数。makeCallback函数是整个代码中较复杂的部分。其实现过程基本是按照 Promises/A+规范(中文)(英文参见 Promises/A+规范(英文))中的[Promise 解决过程]部分来完成的。可参照规范部分,此处就不具体介绍了。
function makeCallback(promise, callback, action) { return function promiseCallback(value) { // 如果传递了callback,则使用前一个promise传递过来的值作为参数调用callback, // 并根据callback的调用结果来处理当前promise if (typeof callback === 'function') { var x; try { x = callback(value); } catch (e) { // 如果调用callback时抛出异常,则直接用此异常对象reject当前promise reject(promise, e); } // 如果callback的返回值是当前promise,为避免造成死循环,需要抛出异常 // 根据Promise+规范,此处应抛出TypeError异常 if (x === promise) { var reason = new TypeError('TypeError: The return value could not be same with the promise'); reject(promise, reason); } // 如果返回值是一个Promise对象,则当返回的Promise对象被resolve/reject后,再resolve/reject当前Promise else if (x instanceof Promise) { x.then( function (data) { resolve(promise, data); }, function (reason) { reject(promise, reason); } ); } else { var then; (function resolveThenable(x) { // 如果返回的是一个Thenable对象(此处逻辑有点坑,参照Promise+的规范实现) if (x && (typeof x === 'object'|| typeof x === 'function')) { try { then = x.then; } catch (e) { reject(promise, e); return; } if (typeof then === 'function') { // 调用Thenable对象的`then`方法时,传递进去的`resolvePromise`和`rejectPromise`方法(及下面的两个匿名方法) // 可能会被重复调用。但Promise+规范规定这两个方法有且只能有其中的一个被调用一次,多次调用将被忽略。 // 此处通过`invoked`来处理重复调用 var invoked = false; try { then.call( x, function (y) { if (invoked) { return; } invoked = true; // 避免死循环 if (y === x) { throw new TypeError('TypeError: The return value could not be same with the previous thenable object'); } // y仍有可能是thenable对象,递归调用 resolveThenable(y); }, function (e) { if (invoked) { return; } invoked = true; reject(promise, e); } ); } catch (e) { // 如果`resolvePromise`和`rejectPromise`方法被调用后,再抛出异常,则忽略异常 // 否则用异常对象reject此Promise对象 if (!invoked) { reject(promise, e); } } } else { resolve(promise, x); } } else { resolve(promise, x); } }(x)); } } // 如果未传递callback,直接用前一个promise传递过来的值resolve/reject当前Promise对象 else { action === 'resolve' ? resolve(promise, value) : reject(promise, value); } }; }
|
|