深入理解JS异步编程三(promise)

原创 2016年06月02日 08:56:36

jQuery

原本写一个小动画我们可能是这样的

$('.animateEle').animate({
  opacity:'.5'
}, 4000,function(){
  $('.animateEle2').animate({
    width:'100px'
  },2000,function(){
    $('.animateEle3').animate({
      height:'0'
    },2000);
  });
});

但是如果我们使用promis对象的话,就可以使得代码更加简单易懂

var animate1 = function() {
  return $('.animateEle1').animate({opacity:'.5'},4000).promise();
};
var animate2 = function() {
  return $('.animateEle2').animate({width:'100px'},2000).promise();
};
var animate3 = function(){
  return $('.animateEle3').animate({height:'0'},2000).promise();
};
$.when(animate1()).then(animate2).then(animate3);

对比上面两段代码,回调的形式相比promise,后期较难维护,层层嵌套,出错不好定位,反直觉。

Promise对象方法

对于DOM,动画,ajax相关方法,都可以使用 promise 方法。调用 promise 方法,返回的是 promise 对象。可以链式调用 promise 方法。

比如jquery中的ajax的 $.post $.get $.ajax 等方法,实际上都是默认调用了promise方法,然后返回了一个promise对象

promise对象常见的方法有三个 : done , fail , then 。

$.get('/',{}).done(function(data){
    console.log('success');
}).fail(function(){
    console.log('fail');
});

query 这里的接口方法太多了,就跟早期的事件方法绑定一样, live , delegate , bind ,最终还是归为 on。

deferred对象方法

var  promisepbj = new $.Deferred();

promisepbj.done(function() {
console.log('haha,done');
}).fail(function() {
console.log('失败了');
}).always(function(res) {
console.log('我总是被执行啦');
});

//使用resolve或者reject就可以调用defferred对象了
promisepobj.resolve();
//promisepobj.reject();

resolve 方法会触发 done 的回调执行, reject 会触发 fail 的回调,对于 always 方法,deferred 对象,无论是 resolve 还是 reject ,都会触发该方法的回调。

ES6 Promise

前面讲了很多jquery的promise实现,$.Deferred 和 ES2015 的 Promise 是不同的东西,因为前者不符合 Promises/A+ 规范。 Promise 对象在 EMCAScript 2015 当中已经成为标准。现在要来谈谈马上要成为主流趋势的es6原生promise对象,首先贴一个很详细的es6 promise的小书,基本你知道的不知道都在里面 http://liubin.org/promises-book/#introduction

阮一峰大神的关于ES6的promise解释 http://es6.ruanyifeng.com/#docs/promise

定义

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
特点:

  • 有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。
  • 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

then方法

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为Reject时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

异常处理

  异常处理一直是回调的难题,而promise提供了非常方便的catch方法:在一次promise调用中,任何的环节发生reject,都可以在最终的catch中捕获到:

Promise.resolve().then(function(){
    return loadImage(img1);
}).then(function(){
    return loadImage(img2);
}).then(function(){
    return loadImage(img3);
}).catch(function(err){
    //错误处理
})

基本的 api

  • Promise.resolve()
  • Promise.reject()
  • Promise.prototype.then()
  • Promise.prototype.catch()
  • Promise.all()

- Promise.race()

具体的很多的用法可以参考阮一峰的 http://es6.ruanyifeng.com/#docs/promise 入门教程

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。

JS异步编程(promise、deferred对象)

本文主要是阅读了几篇文章之后整理出来的笔记。 需要弄清楚的几个概念: 首先要明白JS本身是单线程的,在处理一个任务的时候不可能去处理别的任务。也就是单凭JS是不可能异步编程的,必须借助一些别的...

浅谈JS异步编程——Promise

JS单线程的特点同时也决定了JS中异步编程的必要性,起初,我们常常使用回调函数来处理异步任务,但随着任务越来越复杂,回调函数的层层嵌套使得无论是代码还是开发人员看起来都十分痛苦。。。于是,可爱的Pro...

[ JS 进阶 ] 异步编程 promise模式 的简单实现

[ JS 进阶 ] 异步编程 promise模式 的简单实现javascript web前端开发 Naraku_ 2015年07月28日发布 推荐 1 推荐 收藏 45 收藏,2k 浏览 ...
  • cdnight
  • cdnight
  • 2016年03月12日 11:53
  • 2835

深入理解node.js异步编程:基础篇

1. 概述 目前开源社区最火热的技术当属Node.js莫属了,作为使用Javascript为主要开发语言的服务器端编程技术和平台,一开始就注定会引人瞩目。 当然能够吸引众人的目光,肯定不是三教九流之...

深入理解node.js异步编程(闭包,事件,内存回收,eventloop,io)

深入理解node.js异步编程(闭包,事件,内存,eventloop,io)

promise介绍--异步编程风格(3)

转自:http://www.alloyteam.com/2014/05/javascript-promise-mode/

JavaScript异步编程的Promise模式

异步模式在web编程中变得越来越重要,对于web主流语言Javascript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promis...

Promise和异步编程

JS有很多强大的功能,其中一个是它可以轻松地搞定异步编程。作为一门为Web而生的语言,它从一开始就需要能够响应异步的用户交互,如点击和按键操作等。Node.js用回调函数代替了事件,使异步编程在JS领...

JavaScript异步编程的Promise模式

异步模式在web编程中变得越来越重要,对于web主流语言Javscript来说,这种模式实现起来不是很利索,为此,许多Javascript库(比如 jQuery和Dojo)添加了一种称为promise...
  • flyonok
  • flyonok
  • 2013年05月10日 14:51
  • 876

JavaScript异步编程的Promise模式

转载自: http://www.infoq.com/cn/news/2011/09/js-promise 异步模式在web编程中变得越来越重要,对于web主流语言Javscript来说,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深入理解JS异步编程三(promise)
举报原因:
原因补充:

(最多只允许输入30个字)