Promise

什么是Promise

• Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作
• Promise有以下三种状态：
  • pending： 初始值
  • fulfilled： 代表操作成功
  • rejected： 代表失败
• Promise有两种状态转变方式：
  • pending转变为fulfilled
  • pending转变为rejected
  • 一旦状态改变，就“凝固”了，会一直保持这个状态，不会再发生变化。当状态发生变化，promise.then绑定的函数就会被调用

Promise实例的使用

var promise = new Promise(function(resolve, reject){
    if(异步操作成功){
        resolve(data)
    }else{ //表示异步操作失败
        reject(error)
    }
}

注意：Promise一旦新建就会立即执行

构造函数Promise接受一个函数作为参数，该函数的参数分别是resolve,reject，分别代表两个回调函数。

• resolve函数的作用是：在异步操作成功时调用，并将异步操作的结果作为参数传递出去
• reject函数的作用是：在一步操作失败时调用，并将异步操作报出的错误作为参数传递出去

Promise实例生成后，可以使用then方法指定fulfilled状态和reject状态的回调函数

promise.then(onFulfilled, onRejected);

promise.then(function(data){  ---->对应着上面代码中，异步操作成功时的resolve函数

}, function(error){   ---> 对应着上面代码中，异步操作失败时的reject函数

});

在then方法中指定的回调函数，将在当前脚本所有同步任务执行完之后才会执行。

.then()

new Promise(function(resolve,reject){
    resolve(1);
}).then(function(data1){
    console.log(data1);
    //resolve(2)  注意 resolve在当前环境中是不存在的
    return 2   // 直接 return结果，则会将该结果传递个下一个then()中指定的函数
}).then(function(data2){
    console.log(data2);
})

.catch()

该方法是.then(undefined, onRejected)的别名，用于指定发生错误时的回调函数。

promise.then(function(data) {
    console.log('success');
}).catch(function(error) {
    console.log('error', error);
});

promise对象的错误，会一直向后传递，直到被捕获。即错误总会被下一个catch所捕获。then方法指定的回调函数，若抛出错误，也会被下一个catch捕获。catch中也能抛错，则需要后面的catch来捕获。

sendRequest('test.html').then(function(data1) {
    //do something
}).then(function (data2) {
    //do something
}).catch(function (error) {
    //处理前面三个Promise产生的错误
});

Promise中的一些方法(Promise上的方法)

.all()

该方法用于将多个Promise实例，包装成一个新的Promise实例

// p1,p2,p3都是promise实例
var p = Promise.all([p1, p2, p3]);

新的Promise实例的状态由三个promise实例共同决定

• 当三个promise实例的状态都变为fulfilled，p的状态才会变为fulfilled，并将三个promise返回的结果，按照参数顺序存入数组，传给p的回调函数
• 当p1, p2, p3其中之一状态变为rejected，p的状态也会变为rejected，并把第一个被reject的promise的返回值，传给p的回调函数

.race()

该方法用于将多个Promise实例，包装成一个新的Promise实例

// p1,p2,p3都是promise实例
var p = Promise.race([p1, p2, p3]);

新的Promise实例的状态由三个promise实例共同决定

• 当p1, p2, p3其中之一状态发生改变（变为fulfilled或者rejected），p的状态也会随之改变，并把第一个改变状态的promise的返回值，传给p的回调函数

.resolve()

Promise.resolve方法的参数分为四种情况

• 参数是一个Promise实例

如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

• 参数是一个thenable对象

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

Promise.resolve方法会将这个对象转为Promise对象，然后就立即执行thenable对象的then方法。

• 参数不是具有then方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved。

Promise.resolve('Success');

/*******等同于*******/
new Promise(function (resolve) {
    resolve('Success');
});

• 不带任何参数

直接返回一个Resolved状态的Promise对象。

Promise.resolve('Success');

/*******等同于*******/
new Promise(function (resolve) {
    resolve();
});

.reject()

Promise.reject(new Error('error'));

/*******等同于*******/
new Promise(function (resolve, reject) {
    reject(new Error('error'));
});

这段代码会让这个Promise对象立即进入rejected状态，并将错误对象传递给then指定的onRejected回调函数。

应用

• 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;
    })
}

• 用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.status == 200){
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
    })
    return promise
}

getJSON('/posts.json').then(function(json){
    console.log('Contents: '+json)
}. function(error){
    console.error('出错了' + error)
})