es6 Promise对象

promise的含义

promise是异步编程的一种解决方案，比传统的方法——回调函数和事件，更加合理和强大。promise是一个容器，里面保存着未来才会结束事件的结果（通常是一个异步操作）。porimse提供统一的API处理各种异步操作的结果。
promise有三种状态，pending（进行中）,fulfilled（已成功），rejected（已失败）。promise状态改变不受外界影响，并且只有两种可能；从pending变为fulfilled和从pending变为rejected，只要这两种情况发生，状态就凝固。这时就称为resolved（已定型）
promise的缺点：1、一旦新建就会立即执行，无法中途取消。2、如果不设置回调函数，内部的错误无法获取。3、当处于pending状态时，无法得知具体进展到哪一个阶段。

基本用法

es6规定，Promise对象是一个构造函数，用来生成Promise实例。
生成一个Promise实例

const promise = new Promise((resolve, reject) => {
        if (flag) {
          //异步操作成功
          resolve(value);
        } else {
          reject(error);
        }
      });
promise.then((value)=>{
          //success
      },(error)=>{
          //failure
      })

Promise实例生成后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
Promise新建后，会立即执行。

let promise = new Promise((resolve,reject)=>{
              console.log("Promise")
              resolve()
          })
promise.then(()=>{
              console.log('resolved')
          }) 
console.log('Hi')

        //   Promise
        //   Hi
        //   resolved

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出

Promise异步加载图片

loadImageAsync(url) {
      return new Promise((resolve, reject) => {
        const image = new Image();
        (image.onload = () => {
          resolve(image);
        }),
          (image.onerror = () => {
            reject(new Error("Could not load image at " + url));
          });
        image.src = url;
      });
    }

Promise实现Ajax案例

ajaxPromise(options) {
      return new Promise((resolve, reject) => {
        let { methods, url } = options;
        if (!methods) throw new Error("缺少方法");
        url = url || location.href;
        let xhr = new XMLHttpRequest();
        xhr.open(methods, url);
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 400) {
              resolve(xhr.responseText); //通知成功
            } else if (xhr.status >= 400) {
              reject(xhr.statusText); //通知失败
            }
          }
        };
        xhr.send();
      });
    }
    this.ajaxPromise().then(
      res => {
        console.log("结果", res);
      },
      error => {
        console.log("失败", error);
      }
    );

上面的代码中，ajaxPromise是对XMLHttpRequest对象的封装，用于发出一个针对Json数据的http请求，并返回一个Promise对象。resolve和reject如果带有参数，都会被传递给回调函数，reject表示Error对象的实例，抛出错误，resolve函数除了正常值外，还可能是另外一个Promise实例

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

如上所示，p2的状态依赖于p1

Promise.prototype.then()

Promise实例具有then方法，then方法是定义在原型对象Promise.prototype上的，它是为Promise实例添加状态改变的回调函数，then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的
then方法返回的是一个新的Promise实例，因此可以采用链式的写法

this.ajaxPromise()
      .then(res => {
        return res.test;
      })
      .then(res2 => {
        //...
      });

第一个回调函数完成后，将结果作为参数，传入第二个函数。后一个会等待前一个状态改变才会调用

Promise.prototype.catch()

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

Promise.all()

纸上得来终觉浅,绝知此事要躬行