深入浅出 Promise

Promise 是什么？Promise 怎么用？

概念

含义

Promise 是 JS 的一种异步编程的解决方案。简单来说，Promise 就像一个容器，里面装着一个在未来某个时刻才会结束的事件。

特性

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

缺点

1. 无法取消Promise，一旦新建它就会立即执行，无法中途取消；

2. 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

3. 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

基本用法

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

下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

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

异步加载图片

function loadImageAsync() {
    return new Promise(resolve, reject) {
        const image = new image();
        
        image.onload = faunction() {
            resolve(image);
        }
        
        image.onError() {
            reject(new Error(`Could not load image at ${url}`);
        }
        
        image.src = url;
    }
}

异步实现 AJAX 操作

const getJSON = function(url) {
    const promise = new Promise(resolve, reject) {
        const handle = function () {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(this.statusText);
            }
        };
        const client = new XHLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handle;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    }
    return promise;
}

getJson('/data.json').then(function(json) {
    console.info(`Json: ${json});
}, function(err) {
    console.error('出错了：', err)
})

更多

https://es6.ruanyifeng.com/#docs/promise