ES2015-Promises特性

实例化一个Promise很容易:

new Promise(function(resolve, reject){
  //这里用定时器模拟了一个耗时的操作。
  setTimeout(function(){
    if(异步处理的结果满足条件){
      //执行回调函数resolve。
      resolve(这里可以传入异步处理得到的正确的数据)
      return;
    }
    //如果没有正确完成异步操作则执行reject。
    reject(这里可以传入为什么没有兑现承诺的异常、错误原因);
  }, 500);
})

然而我们不可能每次使用promise的时候都要像上方那样写一大堆东西,比较合理的方式是将上方的代码封装到一个函数中,该函数 return 出promise实例,这样就可以在随后继续操作该函数返回的promise对象了。

比如这样子封装函数:

function asyncFunction(){
  return new Promise(function(resolve, reject){
    //这里用定时器模拟了一个耗时的操作。
    setTimeout(function(){
      if(异步处理的结果满足条件){
        //执行回调函数resolve。
        resolve(这里可以传入异步处理得到的正确的数据)
        return;
      }
      //如果没有正确完成异步操作则执行reject。
      reject(这里可以传入为什么没有兑现承诺的异常、错误原因);
    },500);
  })
}

使用的时候只需要:

var promise = asyncFunction();

便可以得到promise实例啦,当然,具体的函数名称或者方法名称要根据你的需求来定,尽可能起一个让大家一目了然知道其用途的函数名称:

function getArticleDate(){
  //这里用定时器模拟了一个耗时的操作。
  setTimeout(function(){
    return new Promise(function(resolve, reject){
      if(...){
        resolve(...);
        return;
      }
      reject(...);
    })
  }, 500);
}

getArticle().then(...);

点击下方示例的按钮,将会使用 Promises 执行一个模拟的异步请求。

点我~~

但是我们目前还不知道,异步处理的结果是怎么样的(成功 OR 失败),这在下方的 then 方法中会提到如何处理异步请求的结果。

随后可以在该 promise 实例后使用 then 方法,then 方法接收两个参数,分别处理resolve和reject两种情形,具体用法看下方。

Promise#then

promise.then(onFulfilled, onRejected);

需要说明的是, resolve()reject() 如果同时出现在一种结果里,那么会先执行先调用的回调函数。

...
resolve(...);
reject(...);
...

//promise内部会调用开发者注册的 **onFulfilled** 回调函数,并不会调用 **onRejected** 回调函数。因为这里resolve()和reject()函数同时触发了,但resolve()函数在前;反之如果reject()在前则内部直接调用 **onRejected** 回调函数并返回。

fulfilled后缀有ed,表示已经怎么样,它的的中文释义:已经履行、已经兑现、已经满足、已经完成。onFulfilled即是当承诺兑现时执行的回调函数 。

rejected,有ed表示已经怎么样,它的中文释义:拒绝、抵制、排斥。在这里表示承诺无法兑现,onRejected表示当承诺无法兑现时执行的回调函数。

var promise = new Promise(function(resolve, reject){
  resolve("传递给then的值");
});
promise.then(function (value) {
  console.log(value);
}, function (error) {
  console.error(error);
});

这段代码创建一个promise对象,定义了处理onFulfilled和onRejected的函数(handler),然后返回这个promise对象。

这个promise对象会在变为resolve或者reject的时候分别调用相应注册的回调函数。

  • 当handler返回一个正常值的时候,这个值会传递给promise对象的onFulfilled方法。
  • 定义的handler中产生异常的时候,这个值则会传递给promise对象的onRejected方法。
promise.catch(onRejected);
var promise = new Promise(function(resolve, reject){
  resolve("传递给then的值");
});
promise.then(function (value) {
  console.log(value);
}).catch(function (error) {
  console.error(error);
});

这是一个等价于 promise.then(undefined, onRejected) 的语法糖。

Promise.resolve

Promise.resolve(promise);
Promise.resolve(thenable);
Promise.resolve(object);
var taskName = "task 1"
asyncTask(taskName).then(function (value) {
  console.log(value);
}).catch(function (error) {
  console.error(error);
});
function asyncTask(name){
  return Promise.resolve(name).then(function(value){
    return "Done! "+ value;
  });
}

根据接收到的参数不同,返回不同的promise对象。

虽然每种情况都会返回promise对象,但是大体来说主要分为下面3类。

接收到promise对象参数的时候返回的还是接收到的promise对象。

接收到thenable类型的对象的时候返回一个新的promise对象,这个对象具有一个 then 方法。

接收的参数为其他类型的时候(包括JavaScript对或null等)返回一个将该对象作为值的新promise对象。

Promise.reject

Promise.reject(object)

Promise.reject代码示例

var failureStub = sinon.stub(xhr, "request").returns(Promise.reject(new Error("bad!")));

返回一个使用接收到的值进行了reject的新的promise对象。

而传给Promise.reject的值也应该是一个 Error 类型的对象。

另外,和 Promise.resolve不同的是,即使Promise.reject接收到的参数是一个promise对象,该函数也还是会返回一个全新的promise对象。

var r = Promise.reject(new Error("error"));
console.log(r === Promise.reject(r));// false

Promise.all

Promise.all(promiseArray);

Promise.all代码示例

var p1 = Promise.resolve(1),
  p2 = Promise.resolve(2),
  p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
  console.log(results);  // [1, 2, 3]
});

生成并返回一个新的promise对象。

参数传递promise数组中所有的promise对象都变为resolve的时候,该方法才会返回, 新创建的promise则会使用这些promise的值。

如果参数中的任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象。

由于参数数组中的每个元素都是由 Promise.resolve 包装(wrap)的,所以Paomise.all可以处理不同类型的promose对象。

Promise.race

Promise.race(promiseArray);

Promise.race代码示例

var p1 = Promise.resolve(1),
  p2 = Promise.resolve(2),
  p3 = Promise.resolve(3);
Promise.race([p1, p2, p3]).then(function (value) {
  console.log(value);  // 1
});

生成并返回一个新的promise对象。

参数 promise 数组中的任何一个promise对象如果变为resolve或者reject的话, 该函数就会返回,并使用这个promise对象的值进行resolve或者reject。

啊,其实呢,任何一个新的JavaScript特性都需要你自己去尝试去摸索啊,不要眼高手低,其实不看这篇文章,你就去试错也会有进步啊 XD

版权声明 » 自由转载-署名-非商用-相同方式共享

作者署名 » 陈帅华-探索技术艺术与国学之美

发布日期 » 2017年11月3日 星期五

我要留言