es6之Promise

在说promise之前有一些背景了解一下

1. jQuery从v1.5之后的版本都提供了Deferred方法，$.Deferred()会返回一个对象，包含有resolve、reject和done、fail、then方法；
2. resolve、reject是主动触发改变状态的函数；
3. done、fail、then是状态改变之后才触发的监听函数；
4. $.Deferred().promise()返回一个promise对象，相比于deferred对象，缺少了resolve和reject这俩函数；
   

   function foo() {
       var d = $.Deferred()
       var wait = function (dtd) {
           var task = function () {
               console.log('done')
               d.resolve()
           }
           setTimeout(task, 2000)
           return d.promise()  
       }
       return wait(d)
   }
   
   var f = foo() 
   $.when(f)
    .then(function () {
       console.log(1)
    })
    .then(function () {
       console.log(2)
    })

    

Promise

1. Promise是一个对象，从它可以获取异步操作的消息；
2. 特点：对象的状态不受外界影响（Pending进行中、Resolved完成、Rejected失败），只有异步操作的结果可以决定当前状态；一旦状态改变就不会再变（只能从Pending到Resolved和Pending到Rejected）；
3. 缺点：一旦创建就会立即执行无法中途取消；如果没有回调函数，内部抛出的错误无法反映到外部；当处于Pending时，无法得知目前进展到哪一阶段；
4. 一般不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），而是使用catch方法；因为这种可以捕获前面then中的错误，也更接近同步写法（try/catch）
5. 立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外；Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”;
6. catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法；catch方法之中，还能再抛出错误
7. Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例；Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例；只有p1 p2 p3状态都变成fulfilled，p状态才会变成fulfilled；只要有一个rejected，p就变成rejected；
8. Promise.race也是将多个Promise实例包装成新的Promise；只要有一个对象状态变了，p状态就会跟着变，返回先改变的对象的值传给p的回调函数；
9. Promise.resolve将对象转为Promise对象，状态为resolved
   

   // 将thenable对象转为Promise对象
   
   var thenable = {
       then(resolve, reject) {
           resolve(200)
       }
   }
   
   var p = Promise.resolve(thenable)
   
   p.then((data) => {
     console.log(data)
   })  // 200

10. Promise.reject返回一个Promise对象，该实例状态为rejected；这个方法方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。
11. 两个附加方法
    

    // done
    Promise.prototype.done = function(onFulfilled, onRejected) {
        this.then(onFulfilled, onRejected)
            .catch(function(reason) {
                setTimeout(() => {throw reason}, 0)   
            });
    };
    
    // finally
    Promise.prototype.finally = function (callback) {
        let P = this.constructor;
        return this.then(
            value  => P.resolve(callback()).then(() => value),
            reason => P.resolve(callback()).then(() => { throw reason })
        );
    };

    done用于捕获任何时候可能出现的错误，并全局抛出；
    finally用于不管Promise对象状态如何，都会执行的操作，接受一个普通的回调函数作为参数（必执行）；

12. 用promise改造ajax
    

    const ajax = function(url){
      const p = new Promise((resolve, reject) => {
        const handler = function(){
          if(this.readyState !== 4){
            return;
          }
          if(this.status === 200 || this.status === 304){
            resovle(this.responseText)
          }else{
            reject(new Error(this.statusText))
          }
        }
        const xhr = new XMLHttpRequest();
        xhr.open('get', url);
        xhr.onreadystatechange = handler;
        xhr.responseType = "json";
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send();
      });
      return p;
    }
    ajax(url).then().catch();

13. 用promise改造fs.readFile
    

    function readFile(file) {
      return new Promise(function(resolve, reject) {
        fs.readFile(file, 'utf8', function(err, data) {
          if(err) {
            reject(err);
          } else {
            resolve(data);
          }
        });
      });
    }
    readFile(file).then().catch();