ES6的Promise对象

参考：Promise对象

一：promise的含义

1、promise对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态：pending进行中、fulfilled已成功、rejected已失败。

2、promise对象的状态改变只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就不会变了。如果改变发生了，对Promise添加回掉函数可以立即得到结果。

二：缺点

1、新建就会立即执行，无法取消

2、如果不设置回调函数，Promise内部抛出的错误无法反应到外部

3、处于pending状态时，无法得知进展到哪一个阶段

三：基本用法

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

const promise = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
});复制代码

用then方法指定resolved状态和rejected状态的回调函数

promise.then(function(value){
    //success
},function(error){
    //failure
});复制代码

Promise新建就会立即执行

promise.then(function(value){
    //success
},function(error){
    //failure
});

let promise = new Promise(function(resolve,reject){
    console.log('Promise');
    resolve();
});

promise.then(function(){
    console.log('resolved');
});

console.log('Hi');

//Promise
//Hi
//resolved复制代码

用Promise对象实现ajax操作

const getJSON = function(url){
    return new Promise(function(resolve,reject){
        var request = new XMLHttpRequest();
        request.open(method,url);
        request.send(data);
        request.onreadystatechange = function(){
            if(request.readyState == 4){
                if(request.status == 200){
                    resolve(request.response);
                }else{
                    reject(request.status);
                }
            }
        }
    });
};

var p = getJSON(url);
p.then(function(json){
    console.log(json);
}).catch(function(error){
    console.log(error);
});复制代码

异步加载图片

function loadImageAsync(url){
  return new Promise(function(resole, 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.prototype.then()

第一个then方法返回的是一个Promise对象，第二个then方法指定的回调函数等待这个新的Promise对象状态发生变化，如果变为resolved，就调用第一个，变为rejected就调用第二个。

getJSON(url).then(
    post => getJSON(post.URL)
).then(
    comments => console.log(comments),
    err => console.log(err)
);复制代码

五：Promise其他方法

1、Promise.all()将多个Promise实例包装成一个新的Promise实例

const p = Promise.all([p1,p2,p3]);

只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled；只要一个p1、p2、p3之中有一个被rejected，p的状态就变成rejected。

2、Promise.race()

const p = Promise.race([p1,p2,p3])

只要p1、p2、p3之中一个实例改变状态，p的状态就跟着改变。

转载于:https://juejin.im/post/5afbd1225188256709616366