promise

Promise对象

  • promise的含义
    promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件,更合理和强大。
    所谓promise,简单的说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,promise就是一个对象,从它可以获取异步操作的消息。promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

     - promise对象有以下两个特点
    

    (1)对象的状态不受外界影响。promise对象代表一个异步操作,有三种状态:pending(进行中)、resolved(已完成,又称fulfilled)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪种状态,其他的任何操作都无法改变这个状态。
    (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。promise的状态改变只能有两种:从pending变为resolved和pending变为rejected。只要这两种情况发生,状态就凝固了,不会再改变,会一直保持这个结果。就算改变已经发生了,你再次对promise对象添加回调函数,也会立即得到这个结果。这与事件完全不同,事件的特点是,如果你错过了他,再去监听是得不到结果的。
    promise对象提供统一的接口,使得控制异步操作更加容易。

  • promise缺点:无法取消promise,一旦新建就会立即执行,无法中途取消;如果不设置回调函数,promise内部抛出错误,不会反映到外部;当处于pending状态时,无法的到目前进展到哪一个阶段(刚刚开始还是即将完成)。
    如果某些事件不断地反复发生,一般来说,使用stream模式比promise更好。

promise总结

  • 含义
  1. 用来传递异步的信息,解决回调地域的问题;
  2. 特点
  • 有三种状态:pending(进行中)、resolve(已完成)、reject(失败);

  • 状态只能从pending——resolve,pending——reject。

  • 用法

  1. 创建promise对象实例
  2. 实例生成后可以用then方法分别指定resolve和reject的回调函数;
  3. resolve和reject回调函数的参数都可以是promise对象。
  • promise的方法
  1. promise.then():返回的是一个promise,可以用链式写法;
  2. .catch():用于指定发生错误时的回调函数,返回的也是promise对象;
  3. promise.resolve():将现有对象转化成promise对象
  4. promise.reject():返回一个新的promise对象。
  • 封装多个promise实例
  1. promise.all():所有状态都变为resolve是,封装对象P才变为resolve状态;
  2. promise.race():参数有一个状态改变,P就改变
  • 用途
  1. 部署ajax

     	//promise部署Ajax
     	var getJSON = function(url){
     	    var promise = new Promise(function(resolve, reject){
     	        var client = new XMLHttpRequest();
     	        client.open("GET", url);
     	        client.onreadystatechange = handler;
     	        client.responseType = "json";
     	        client.setRequestHeader("Accept", "application/json");
     	        client.send();
     	
     	        function handler(){
     	            if(this.readyState !== 4){
     	                return;
     	            }
     	            if(this.state == 200){
     	                resolve(this.response);
     	            }else{
     	                reject(new Error(this.statusText));
     	            }
     	        };
     	    });
     	
     	    return promise;
     	};
     	
     	getJSON("/posts.json").then(function(json)P{
     	    console.log('Contents:' + json);
     	}, function(error){
     	    console.log('出错了', error);
     	});
    
  2. 加载图片

     	//promise异步加载图片
     	function loadImageAsync(url){
     	    return new Promise(function(resolve, reject){
     	        var image = new Image();
     	
     	        image.onload = function(){
     	            resolve(image);
     	        };
     	
     	        image.onerror =function(){
     	            reject(new Error('could not load image at'+url));
     	        };
     	
     	        image.src = url;
     	    });
    
posted @ 2017-08-19 21:05  美美王子  阅读(130)  评论(0编辑  收藏  举报