异步编程库 When.js 快速上手简约教程

发布于 2019-08-18 20:06:13 字数 5194 浏览 1030 评论 0

When.js 很小,压缩后只有数 kb,gzip 后的大小几乎可以忽略。在 Node 和浏览器环境里都可以使用 When.js。

首先,我们看一小段代码:

var getData = function(callback) {
  $.getJSON(api, function(data){
    callback(data[0]);
  });
}

var getImg = function(src, callback) {
  var img = new Image();

  img.onload = function() {
    callback(img);
  };

  img.src = src;
}

var showImg = function(img) {
  $(img).appendTo($('#container'));
}

getData(function(data) {
  getImg(data, function(img) {
    showImg(img);
  });
});

这段代码完成了三个任务:1)获取数据;2)加载图片;3)显示图片,其中,任务1和2是异步,3是同步,使用的是最常见的callback机制来处理异步逻辑,好处是浅显易懂,缺点是强耦合、不直观、处理异常麻烦等等。

我们尝试用when.js改写下这段代码:

var getData = function() {
  var deferred = when.defer();

  $.getJSON(api, function(data){
    deferred.resolve(data[0]);
  });

  return deferred.promise;
}

var getImg = function(src) {
  var deferred = when.defer();

  var img = new Image();

  img.onload = function() {
    deferred.resolve(img);
  };

  img.src = src;

  return deferred.promise;
}

var showImg = function(img) {
  $(img).appendTo($('#container'));
}

getData()
.then(getImg)
.then(showImg);

看最后三行代码,是不是一目了然,非常的语义化?来看下改写后的任务1、2多了些什么:

var deferred = when.defer();

定义了一个deferred对象。

deferred.resolve(data);

在异步获取数据完成时,把数据作为参数,调用deferred对象的resolve方法。

return deferred.promise;

返回了deferred对象的promise属性。

在Promises/A规范中,每个任务都有三种状态:默认(pending)、完成(fulfilled)、失败(rejected)。

  • 默认状态可以单向转移到完成状态,这个过程叫resolve,对应的方法是deferred.resolve(promiseOrValue);
  • 默认状态还可以单向转移到失败状态,这个过程叫reject,对应的方法是deferred.reject(reason);
  • 默认状态时,还可以通过deferred.notify(update)来宣告任务执行信息,如执行进度;
  • 状态的转移是一次性的,一旦任务由初始的pending转为其他状态,就会进入到下一个任务的执行过程中。

有人可能会觉得奇怪:改变任务状态的resolve和reject方法是定义在deferred对象上,但最后返回的却是deferred的promise属性。这么做一是因为规范就是这么定的,二是可以防止任务状态被外部改变。

then有三个参数,分别是onFulfilled、onRejected、onProgress,通过这三个参数,就可以指定上一个任务在resolve、reject和notify时该如何处理。例如上一个任务被resolve(data),onFulfilled函数就会被触发,data作为它的参数;被reject(reason),那么onRejected就会被触发,收到reason。任何时候,onFulfilled和onRejected都只有其一可以被触发,并且只触发一次;onProgress顾名思义,每次notify时都会被调用。下面是reject和notify的用法:

function run() {
  var deferred = when.defer();
  var start = 1, end = 100;

  (function() {
    if(start <= end) {
      deferred.notify(start++);
      setTimeout(arguments.callee, 50);
    } else {
      deferred.reject('time out!');
    }
  })();

  return deferred.promise;
}

run().then(undefined,
  function(reason) {
    alert(reason);
  }, function(s) {
    document.getElementById('output').innerHTML = s + '%';
  }
);

then会传递错误,也就是说有多个任务串行执行时,我们可以只在最后一个then定义onRejected。只定义了onRejected的then等同于otherwise,也就是说 otherwise(onRejected) 是 then(undefined, onRejected) 的简便写法。

then会在try..catch..的包裹之下执行任务,所以任务的异常都会被when.js捕获,当做失败状态处理,类似这样:

try {
  ...
} catch (e) {
  deferred.reject(e);
}

在任务状态改变之后再then,依然可以正常工作,后续任务会立刻执行。如果要在多个任务最后做cleanup工作,而不管之前的任务成功与否,可以用ensure方法。它只接受一个参数onFulfilledOrRejected,始终会执行。另外when.js还有一个always方法,即将废弃,建议大家不要使用。

回到上面加载图片的场景,如果把任务2变为:加载多张图片,全部完成后再执行任务3。这时候需要用到when.all,when.all接受一个promise数组,返回promise,这个promise会在promise数组中每一个promise都resolve之后再resolve。说起来拗口,看代码就明白了:

var getData = function() {
  var deferred = when.defer();

  $.getJSON(api, function(data){
    var data = data.slice(0, 3);
    deferred.resolve(data);
  });

  return deferred.promise;
}

var getImg = function(src) {
  var deferred = when.defer();

  var img = new Image();

  img.onload = function() {
    deferred.resolve(img);
  };

  img.src = src;

  return deferred.promise;
}

var showImgs = function(imgs) {
  $(imgs).appendTo($('#container'));
}

var getImgs = function(data) {
  var deferreds = [];
  for(var i = 0; i < data.length; i++) {
    deferreds.push(getImg(data[i]));
  }
  return deferreds;
}

when.all(getData().then(getImgs)).then(showImgs);

如果我们只是想把一个promise数组挨个执行一遍,可以用when.settle:

var promise1 = function() {
  var deferred = when.defer();
  setTimeout(function() {
      deferred.reject('A');
    }, 2000);
  return deferred.promise;
};

var promise2 = function() {
  var deferred = when.defer();
  setTimeout(function() {
      deferred.resolve('B');
    }, 2000);
  return deferred.promise;
};

when.settle([promise1(), promise2()]).then(function(result) {
  console.log(result); /*
  [{"state":"rejected","reason":"A"},
  {"state":"fulfilled","value":"B"}] */ 
});

有时候,我们需要引入任务竞争机制,例如从一批 cdn 中找到最快的那个,when.any 就派上用场了,when.any 接受 promise 数组,在其中任何一个resolve后就接着执行后续任务了。如果要在一批 promise 中某几个 resolve 后执行后续任务,可以用 when.some,它比 when.any 多一个 howMany 的参数。

Promise 给异步编程代码带来了巨大的方便,从此我们可以更专注单个任务的实现,promise 会很好的替我们解决任务调度问题。when.js提供的功能远远不止本文提到的这些,有兴趣的同学可以前往官方api文档了解更多。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。