JavaScript_javascript スキルでの Promise の使用を理解する

JavaScript はコールバック関数を使用して非同期プログラミングを処理します。同期プログラミングから非同期コールバック プログラミングへの適応プロセスはありますが、コールバックのネストが複数レベルにある場合 (これを、しばしば破滅のコールバック ピラミッド (破滅のピラミッド) と呼びます)、それは間違いなく悪いプログラミング エクスペリエンスです。したがって、コールバック ピラミッドの問題を解決する CommonJS の Promises/A 仕様があります。この記事では、まずPromise関連の仕様を紹介し、その後ミニPromiseを読み解くことで理解を深めていきます。

約束とは
Promise オブジェクトは、現在利用できない値を表しますが、将来のある時点で解決される可能性があります。これにより、同期的な方法で非同期コードを作成できます。たとえば、Promise API を使用してリモート サーバーへの非同期呼び出しを行う場合は、将来 Web サービスによって返されるデータを表す Promise オブジェクトを作成する必要があります。唯一の問題は、データがまだ利用できないことです。リクエストが完了してサーバーから返されると、データが利用可能になります。この間、Promise オブジェクトは実際のデータのプロキシとして機能します。次に、実際のデータが利用可能になったときに呼び出されるコールバック関数を Promise オブジェクトにバインドできます。

Promise オブジェクトは、多くの言語にさまざまな形で存在してきました。

破滅のピラミッドを取り除く
JavaScript で最も一般的なアンチパターンは、コールバック内にコールバックをネストすることです。

// 回调金字塔
asyncOperation(function(data){
 // 处理 `data`
 anotherAsync(function(data2){
   // 处理 `data2`
   yetAnotherAsync(function(){
     // 完成
   });
 });
});

Promise 導入後のコード

promiseSomething()
.then(function(data){
  // 处理 `data`
  return anotherAsync();
})
.then(function(data2){
  // 处理 `data2`
  return yetAnotherAsync();
})
.then(function(){
  // 完成
});

Promise は、ネストされたコールバックを一連の .then 連続呼び出しに変換し、インデント層の不正なコード スタイルを排除します。 Promise は特定の問題を解決するためのアルゴリズムではなく、より優れたコード編成モデルです。新しい組織モデルを受け入れながら、新しい観点から非同期呼び出しについても徐々に理解していきます。

各言語プラットフォームには対応する Promise 実装があります

• Java の java.util.concurrent.Future
  
• Python の Twisted 遅延と PEP-3148 先物
  
• F# の非同期
  
• .Net のタスク
  
• C++ 11 の std::future
  
• ダーツの未来
  
• JavaScript の約束/A/B/D/A+
  

ここで、JavaScript 言語環境の各仕様の詳細をいくつか見てみましょう。

約束/仕様
Promise は、操作の完了時に返される最終値を表します。

• Promise には、**unfulfilled** (未履行)、**completed** (履行)、**failed** (失敗) の 3 つの状態があります。
  
• Promise のステータスは、**未完了**から完了、または**未完了**から**失敗**にのみ変換できます。
  
• Promise の状態遷移は 1 回だけ発生します。
  

promise には then メソッドがあり、パラメータとして 3 つの関数を受け取ることができます。最初の 2 つの関数は、約束の 2 つの状態、つまり履行と拒否のコールバック関数に対応します。 3 番目の関数は進行状況情報を処理します (進行状況コールバックのサポートはオプションです)。

promiseSomething().then(function(fulfilled){
    //当promise状态变成fulfilled时，调用此函数
  },function(rejected){
    //当promise状态变成rejected时，调用此函数
  },function(progress){
    //当返回进度信息时，调用此函数
  });

如果 promise 支持如下连个附加方法，称之为可交互的 promise

• get(propertyName)

获得当前 promise 最终值上的一个属性，返回值是一个新的 promise。

• call(functionName, arg1, arg2, ...)

调用当然 promise 最终值上的一个方法，返回值也是一个新的promise。

Promises/B 规范
在 Promises/A 的基础上，Promises/B 定义了一组 promise 模块需要实现的 API

when(value, callback, errback_opt)
如果 value 不是一个 promise ，那么下一事件循环callback会被调用，value 作为 callback 的传入值。如果 value 是一个 promise，promise 的状态已经完成或者变成完成时，那么下一事件循环 callback 会被调用，resolve 的值会被传入 callback；promise 的状态已经失败或者变成失败时，那么下一事件循环 errback 会被调用，reason 会作为失败的理由传入 errback。

asap(value, callback, errback_opt)
与 when 最大的区别，如果 value 不是一个 promise，会被立即执行，不会等到下一事件循环。

enqueue(task Function)
尽可能快地在接下来的事件循环调用 task 方法。

get(object, name)
返回一个获得对象属性的 promise。

post(object, name, args)
返回一个调用对象方法的 promise。

put(object, name, value)
返回一个修改对象属性的 promise。

del(object, name)
返回一个删除对象属性的 promise。

makePromise(descriptor Object, fallback Function)
返回一个 promise 对象，该对象必须是一个可调用的函数，也可能是可被实例化的构造函数。

• 第一个参数接受一个描述对象，该对象结构如下，
  

{ "when": function(errback){...}, "get": function(name){...}, "put": function(name, value){...}, "post": function(name, args){...}, "del": function(name){...}, } 

上面每一个注册的 handle 都返回一个 resolved value或者 promise。

• 第二个参数接受一个 fallback(message,...args) 函数，当没有 promise 对象没有找到对应的 handle 时该函数会被触发，返回一个 resolved value 或者 promise。

defer()
返回一个对象，该对象包含一个 resolve(value) 方法和一个 promise 属性。
当 resolve(value) 方法被第一次调用时，promise 属性的状态变成 完成，所有之前或之后观察该 promise 的 promise 的状态都被转变成 完成。value 参数如果不是一个 promise ，会被包装成一个 promise 的 ref。resolve 方法会忽略之后的所有调用。

reject(reason String)
返回一个被标记为 失败 的 promise。
一个失败的 promise 上被调用 when(message) 方法时，会采用如下两种方法之一
1. 如果存在 errback，errback 会以 reason 作为参数被调用。when方法会将 errback 的返回值返回。
2. 如果不存在 errback，when 方法返回一个新的 reject 状态的promise 对象，以同一 reason 作为参数。

ref(value)
如果 value 是 promise 对象，返回 value 本身。否则，返回一个resolved 的 promise，携带如下 handle。
1. when(errback),忽略 errback，返回 resolved 值
2. get(name)，返回 resolved 值的对应属性。
3. put(name, value) ，设置 resolved 值的对应属性。
4. del(name)，删除 resolved 值的对应属性。
5. post(name, args), 调用 resolved 值的对应方法。
6. 其他所有的调用都返回一个 reject，并携带 "Promise does not handle NAME" 的理由。

isPromise(value) Boolean
判断一个对象是否是 promise

method(name String)
获得一个返回 name 对应方法的 promise。返回值是 "get", "put", "del" 和 "post" 对应的方法，但是会在下一事件循环返回。

Promises/D 规范
为了增加不同 promise 实现之间的可互操作性，Promises/D 规范对promise 对象和 Promises/B 规范做了进一步的约定。以达到鸭子类型的效果（Duck-type Promise）。

简单来说Promises/D 规范，做了两件事情，

1、如何判断一个对象是 Promise 类型。
2、对 Promises/B 规范进行细节补充。
甄别一个 Promise 对象
Promise 对象必须是实现 promiseSend 方法。
1. 在 promise 库上下文中，如果对象包含 promiseSend 方法就可以甄别为promise 对象
2. promiseSend 方法必须接受一个操作名称，作为第一个参数
3. 操作名称是一个可扩展的集合，下面是一些保留名称
1. when，此时第三个参数必须是 rejection 回调。
1. rejection回调必须接受一个 rejection 原因(可以是任何值)作为第一个参数
2. get，此时第三个参数为属性名（字符串类型）
3. put，此时第三个参数为属性名（字符串类型）,第四个参数为新属性值。
4. del，此时第三个参数为属性名
5. post，此时第三个参数为方法的属性名，接下来的变参为方法的调用参数
6. isDef
4. promiseSend方法的第二个参数为 resolver 方法
5. promiseSend方法可能接受变参
6. promiseSend方法必须返回undefined

对 Promises/B 规范的补充
Promises/D 规范中对 Promises/B 规范中定义的ref、reject、def、defer方法做了进一步细致的约束，此处略去这些细节。

Promises/A+ 规范
前面提到的 Promises/A/B/D 规范都是有CommonJS组织提出的，Promises/A+是有一个自称为Promises/A+ 组织发布的，该规范是以Promises/A作为基础进行补充和修订，旨在提高promise实现之间的可互操作性。

Promises/A+ 对.then方法进行细致的补充，定义了细致的Promise Resolution Procedure流程，并且将.then方法作为promise的对象甄别方法。

此外，Promises/A+ 还提供了兼容性测试工具，以确定各个实现的兼容性。

实现一个迷你版本的Promise
上面扯了这么多规范，现在我们看看如何实现一个简单而短小的Promise。

1、状态机

var PENDING = 0;
var FULFILLED = 1;
var REJECTED = 2;

function Promise() {
 // store state which can be PENDING, FULFILLED or REJECTED
 var state = PENDING;

 // store value or error once FULFILLED or REJECTED
 var value = null;

 // store sucess & failure handlers attached by calling .then or .done
 var handlers = [];
}

2、状态变迁
仅支持两种状态变迁，fulfill和reject

// ...

function Promise() {
  // ...

 function fulfill(result) {
  state = FULFILLED;
  value = result;
 }

 function reject(error) {
  state = REJECTED;
  value = error;
 }

}

fulfill和reject方法较为底层，通常更高级的resolve方法开放给外部。

// ...

function Promise() {

 // ...

 function resolve(result) {
  try {
   var then = getThen(result);
   if (then) {
    doResolve(then.bind(result), resolve, reject)
    return
   }
   fulfill(result);
  } catch (e) {
   reject(e);
  }
 }
}

resolve方法可以接受一个普通值或者另一个promise作为参数，如果接受一个promise作为参数，等待其完成。promise不允许被另一个promise fulfill，所以需要开放resolve方法。resolve方法依赖一些帮助方法定义如下:

/**
 * Check if a value is a Promise and, if it is,
 * return the `then` method of that promise.
 *
 * @param {Promise|Any} value
 * @return {Function|Null}
 */
function getThen(value) {
 var t = typeof value;
 if (value && (t === 'object' || t === 'function')) {
  var then = value.then;
  if (typeof then === 'function') {
   return then;
  }
 }
 return null;
}

/**
 * Take a potentially misbehaving resolver function and make sure
 * onFulfilled and onRejected are only called once.
 *
 * Makes no guarantees about asynchrony.
 *
 * @param {Function} fn A resolver function that may not be trusted
 * @param {Function} onFulfilled
 * @param {Function} onRejected
 */
function doResolve(fn, onFulfilled, onRejected) {
 var done = false;
 try {
  fn(function (value) {
   if (done) return
   done = true
   onFulfilled(value)
  }, function (reason) {
   if (done) return
   done = true
   onRejected(reason)
  })
 } catch (ex) {
  if (done) return
  done = true
  onRejected(ex)
 }
}

这里resolve和doResolve之间的递归很巧妙，用来处理promise的层层嵌套（promise的value是一个promise）。

构造器

// ...

function Promise(fn) {
  // ...
  doResolve(fn, resolve, reject);
}

.done方法

// ...
function Promise(fn) {
 // ...

 function handle(handler) {
  if (state === PENDING) {
   handlers.push(handler);
  } else {
   if (state === FULFILLED &&
    typeof handler.onFulfilled === 'function') {
    handler.onFulfilled(value);
   }
   if (state === REJECTED &&
    typeof handler.onRejected === 'function') {
    handler.onRejected(value);
   }
  }
 }

 this.done = function (onFulfilled, onRejected) {
  // ensure we are always asynchronous
  setTimeout(function () {
   handle({
    onFulfilled: onFulfilled,
    onRejected: onRejected
   });
  }, 0);
 }
 // ...
}

.then方法

// ...
function Promise(fn) {
  // ...
  this.then = function (onFulfilled, onRejected) {
   var self = this;
   return new Promise(function (resolve, reject) {
    return self.done(function (result) {
     if (typeof onFulfilled === 'function') {
      try {
       return resolve(onFulfilled(result));
      } catch (ex) {
       return reject(ex);
      }
     } else {
      return resolve(result);
     }
    }, function (error) {
     if (typeof onRejected === 'function') {
      try {
       return resolve(onRejected(error));
      } catch (ex) {
       return reject(ex);
      }
     } else {
      return reject(error);
     }
    });
   });
  }
  // ...
}

$.promise
jQuery 1.8 之前的版本，jQuery的 then 方法只是一种可以同时调用 done 、fail 和 progress 这三种回调的速写方法，而 Promises/A 规范的 then 在行为上更像是 jQuery 的 pipe。 jQuery 1.8 修正了这个问题，使 then 成为 pipe 的同义词。不过，由于向后兼容的问题，jQuery 的 Promise 再如何对 Promises/A 示好也不太会招人待见。

此外，在 Promises/A 规范中，由 then 方法生成的 Promise 对象是已执行还是已拒绝，取决于由 then 方法调用的那个回调是返回值还是抛出错误。在 JQuery 的 Promise 对象的回调中抛出错误是个糟糕的主意，因为错误不会被捕获。

小结
最后一个例子揭示了，实现 Promise 的关键是实现好 doResolve 方法，在完事以后触发回调。而为了保证异步 setTimeout(fun, 0); 是关键一步。

Promise 一直用得蛮顺手的，其很好的优化了 NodeJS 异步处理时的代码结构。但是对于其工作原理却有些懵懂和好奇，于是花了些精力查阅并翻译了Promise 的规范，以充分的理解 Promise 的细节。

以上就是关于JavaScript中Promise的使用方法介绍，希望对大家的学习有所帮助。