JavaScript_javascript 기술에서 Promise 사용 이해-JS 튜토리얼-php.cn

Javascript는 콜백 함수를 사용하여 비동기 프로그래밍을 처리합니다. 동기 프로그래밍에서 비동기 콜백 프로그래밍으로의 적응 과정이 있지만, 우리가 흔히 파멸의 콜백 피라미드(Pyramid of Doom)라고 부르는 콜백 중첩 수준이 여러 개인 경우 이는 확실히 나쁜 프로그래밍 경험입니다. 따라서 콜백 피라미드 문제를 해결하기 위한 CommonJS의 Promises/A 사양이 있습니다. 본 글에서는 먼저 Promise 관련 명세를 소개한 후, 미니 Promise를 해석하여 이해를 심화시킵니다.

약속이란
Promise 객체는 현재 사용할 수 없지만 미래의 특정 시점에 해결될 수 있는 값을 나타냅니다. 이를 통해 비동기식 코드를 동기식으로 작성할 수 있습니다. 예를 들어, Promise API를 사용하여 원격 서버에 대한 비동기 호출을 수행하려는 경우 나중에 웹 서비스에서 반환할 데이터를 나타내는 Promise 객체를 생성해야 합니다. 유일한 문제는 아직 데이터를 사용할 수 없다는 것입니다. 요청이 완료되어 서버에서 반환되면 데이터를 사용할 수 있게 됩니다. 이 시간 동안 Promise 객체는 실제 데이터에 대한 프록시 역할을 합니다. 다음으로 실제 데이터를 사용할 수 있게 되면 호출되는 콜백 함수를 Promise 객체에 바인딩할 수 있습니다.

Promise 객체는 다양한 언어와 다양한 형태로 존재해 왔습니다.

파멸의 피라미드 제거
Javascript에서 가장 일반적인 안티 패턴은 콜백 내에 콜백을 중첩하는 것입니다.

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

로그인 후 복사

프라미스 도입 후의 코드

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

로그인 후 복사

Promise는 중첩된 콜백을 일련의 .then 연속 호출로 변환하여 들여쓰기 레이어의 잘못된 코드 스타일을 제거합니다. 약속은 특정 문제를 해결하기 위한 알고리즘이 아니라 더 나은 코드 구성 모델입니다. 새로운 조직 모델을 받아들이면서 점차 새로운 관점에서 비동기 호출을 이해하게 됩니다.

각 언어 플랫폼에는 해당 Promise 구현이 있습니다

Java의 java.util.concurrent.Future
Python의 Twisted 연기 및 PEP-3148 미래
F#의 비동기
.Net의 업무
C++ 11의 std::future
다트의 미래
자바스크립트의 약속/A/B/D/A+

이제 자바스크립트 언어 환경의 각 사양에 대한 세부 사항을 살펴보겠습니다.

약속/사양
Promise는 작업이 완료될 때 반환되는 최종 값을 나타냅니다.

Promise에는 **미완료**(미완료), **완료**(이행), **실패**(실패)의 세 가지 상태가 있습니다.
Promise의 상태는 **미완성**에서 완료로 또는 **미완료**에서 **실패**로만 변환할 수 있습니다.
Promise의 상태 전환은 한 번만 발생합니다.

promise에는 3가지 함수를 매개변수로 받을 수 있는 then 메소드가 있습니다. 처음 두 함수는 이행 및 거부라는 두 가지 약속 상태의 콜백 함수에 해당합니다. 세 번째 함수는 진행 정보를 처리합니다(진행 콜백 지원은 선택 사항입니다).

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的使用方法介绍，希望对大家的学习有所帮助。