终于有时间写这篇文章了, ES2015 推出了JS 的 Promise ,而在没有原生支持的时候,我们也可以使用诸如 Promises/A+ 的库的帮助,在我们的代码里实现Promise 的支持;
在讲具体实现之前我们还是先了解下我们如何使用 Promise 在我们的代码中。
- function getData() {
- return new Promise((resolve, reject) = >{
- request(your_url, (error, res, movieData) = >{
- if (error) reject(error);
- else resolve(movieData);
- });
- });
- }
- // 使用 getData
- getData().then(data = >console.log(data)).
- catch(error = >console.log(error));
例子我们需要使用 request 模块去请求一个地址,然后拿到响应的数据。由于 request 过程是一个异步的过程。因此我们使用了 promise 来实现。在使用 promsie 的 then 方法拿到 resolve 回来的的数据。
首先我们定义一个基本的 Promise 类,为了区别于原生的 Promise 我们可以自定义一个 JPromise 类。
- function Promise(fn) {
- var callback = null;
- this.then = function(cb) {
- callback = cb;
- };
- function resolve(value) {
- callback(value);
- }
- fn(resolve);
- }
我们这个时候先添加一些简单的测试用例。
- /** test a single plugin */
- import { expect } from 'chai';
- import JPromise from '../../src/index';
- describe('your own promise library unit tests', () => {
- let data = 1;
- const p = new JPromise((resolve) => {
- resolve(5);
- });
- it('has then method', () => {
- expect(typeof p.then === 'function').to.equal(true);
- });
- it('excute a then function', () => {
- p.then((val) => data = val);
- expect(data).to.equal(5);
- });
- });
测试源码
但是这样写法有一个问题就是你会发现他在 resolve() 会在 then 之前调用。意味着 callback 会是 null .暂时我们用 setTimeout 来 hack 这个问题。
- function Promise(fn) {
- var callback = null;
- this.then = function(cb) {
- callback = cb;
- };
- function resolve(value) {
- setTimeout(function() {
- callback(value);
- },
- 1);
- }
- fn(resolve);
- }
但实际我们在测试的过程中,会发现这样只是规避 resolve 先执行的问题,后面会继续说如何解决上面的问题。
再进一步,我们需要 Promise 有状态。
- function JPromise(fn) {
- let state = 'pending';
- let deferred = null;
- let value = null;
- function resolve(newVal) {
- value = newVal;
- state = 'resolved';
- if (deferred) {
- handle(deferred);
- }
- }
- function handle(onResolved) {
- if (state === 'pending') {
- deferred = onResolved;
- return;
- }
- onResolved(value);
- }
- this.then = function(onResolved) {
- handle(onResolved);
- };
- fn(resolve);
- }
- module.exports = JPromise;
通过状态,我们可以确保每次函数触发 then 方法的时候, resolve 始终都能够被调用到。
似乎这个时候我们的测试可以跑通了。但是,远远没有结束,我们要确保 Promise 的链式调用。
- getSomeData()
- .then(filterTheData)
- .then(processTheData)
- .then(displayTheData);
我们可能经常会看到这样的写法。很显然刚刚的不合适了。函数会一次执行 then 方法,然后等待 传入 resolve 里的函数执行完毕,然后执行下一个 then 方法 。
如果熟悉 jQuery 链式调用 的话,可以很好的理解。
我们会在 then 的方法里面返回 Promise 对象。
- function JPromise(fn) {
- let state = 'pending';
- let deferred = null;
- let value = null;
- function resolve(newVal) {
- value = newVal;
- state = 'resolved';
- if (deferred) {
- handle(deferred);
- }
- }
- function handle(handler) {
- if (!handler.onResolved) {
- handler.resolve(value);
- return;
- }
- const ret = handler.onResolved(value);
- handler.resolve(ret);
- }
- this.then = function(onResolved) {
- return new Promise((resolve) = >{
- handle({
- onResolved,
- resolve,
- });
- });
- };
- fn(resolve);
- }
- module.exports = JPromise;
从上面代码我们中可以看出,我们在调用 then 的方法适合,始终都会创建一个 Promise 对象。而使用回调的时候则可以避免这样一个问题。
那么第二个 Promise resolve 传入的实际上是第一个 Promise 返回的值。
- const ret = handler.onResolved(value);
我们会将函数执行的值,带入下一个 resolve 中。由于 then() 方法始终都是返回一个 Promsie
当然 then() 方法也允许你不传入 callback 进去,比如下面这样:
- doSomething().then().then(function(result) {
- console.log('got a result', result);
- });
当然这些就是程序兼容性的处理。我们需要在没有传入的时候将之前保留的函数进行触发
- if (!handler.onResolved) {
- handler.resolve(value);
- return;
- }
如果遇到问题了,我们需要对这些进行抛出,外部能够获取到这些问题。
- doSomething().then(function(value) {
- console.log('Success!', value);
- }, function(error) {
- console.log('Uh oh', error);
- });
如同上面实现的一样我们需要将内部的 state 置位 rejected。
- function doSomething() {
- return new Promise(function(resolve, reject) {
- var result = somehowGetTheValue();
- if (result.error) {
- reject(result.error);
- } else {
- resolve(result.value);
- }
- });
- }
参考 resolve 的实现,
- function JPromise(fn) {
- let state = 'pending';
- let deferred = null;
- let value = null;
- function resolve(newVal) {
- value = newVal;
- state = 'resolved';
- if (deferred) {
- handle(deferred);
- }
- }
- function reject(reason) {
- state = 'rejected';
- value = reason;
- if (deferred) {
- handle(deferred);
- }
- }
- function handle(handler) {
- if (state === 'pending') {
- deferred = handler;
- return;
- }
- let handlerCallback;
- if (state === 'resolved') {
- handlerCallback = handler.onResolved;
- } else {
- handlerCallback = handler.onRejected;
- }
- if (!handlerCallback) {
- if (state === 'resolved') {
- handler.resolve(value);
- } else {
- handler.reject(value);
- }
- return;
- }
- const ret = handlerCallback(value);
- handler.resolve(ret);
- }
- this.then = function(onResolved, onRejected) {
- return new Promise((resolve, rejected) = >{
- handle({
- onResolved,
- onRejected,
- resolve,
- rejected
- });
- });
- };
- fn(resolve, reject);
- }
- module.exports = JPromise;
实现到这里的时候,我们还需要对异常的错误进行处理;在 Promise 用 catch 进行捕获。
- function resolve(newValue) {
- try {
- // ... as before
- } catch(e) {
- reject(e);
- }
- }
除此之外,我们还得防止 在执行回调的时候,在被调用的过程中出现异常。
- function handle(deferred) {
- // ... as before
- let ret;
- try {
- ret = handlerCallback(value);
- } catch(e) {
- handler.reject(e);
- return;
- }
- handler.resolve(ret);
- }
似乎感觉实现的差不多了。但是刚才的实现有一个不好的地方,就是 Promise 中用了 try…catch… 。这样 Promise 会吞噬错误。也就是:
- function getSomeJson() {
- return new Promise(function(resolve, reject) {
- var badJson = "
- uh oh, this is not JSON at all!
- ";
- resolve(badJson);
- });
- }
- getSomeJson().then(function(json) {
- var obj = JSON.parse(json);
- console.log(obj);
- },
- function(error) {
- console.log('uh oh', error);
- });
这个 JSON 解析的时候会出现错误,但实际上我们在控制台看不到这样的错误。如果你想捕获这些错误,你需要添加一个错误处理的函数:
- getSomeJson().then(function(json) {
- var obj = JSON.parse(json);
- console.log(obj);
- }).then(null, function(error) {
- console.log("an error occured: ", error);
- });
前面我们提到了使用 setTimeout 去故意延迟执行,随后我们通过 state 去克服了这么一个问题,但是 Promises/A+ 的定义额 promise 的解决方案的确是异步执行的。这样我们可以利用 setTimeout 去包裹 handle 里的 resovle 执行;
- function handle(handler) {
- if(state === 'pending') {
- deferred = handler;
- return;
- }
- setTimeout(function() {
- // ... as before
- }, 1);
- }
实际上,在实现过程中,我们可以使用 setImmediate 而不是 setTimeout。
- var promise = doAnOperation();
- invokeSomething();
- promise.then(wrapItAllUp);
- invokeSomethingElse();
上面的代码,我们预期的效果执行流程
- doAnOperation - >invokeSomething - >invokeSomethingElse - >wrapItAllUp
然而如果 doAnOperation 并非异步执行的函数的话,可能实际效果是:
- doAnOperation - >invokeSomething - >wrapItAllUp - >invokeSomethingElse
这就是为什么 promise 始终都会去异步执行传入的回调。
最终源码参考
来源: http://www.jqhtml.com/9665.html