ES6之Promise承诺对象

Promise梳理
promise是构造函数，用于创建一个承诺对象，承诺对象主要用于封装异步操作。
作用:就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。(防止多层回调)
从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。

promise存在三种状态：

承诺发起

承诺成功 resolved

承诺失败 rejected

1) 获取或者创建一个承诺对象

let promise = new Promise(function(resolve,reject){
})

resolve 方法, 将承诺对象 pending -> resolved
reject 方法, 将承诺对象 pending -> rejected

2) 使用承诺对象

1、

Promise.prototype.then(successHandler[,errorHandler])
successHandler 当承诺成功的时候执行
errorHandler 当承诺失败的时候执行
一般不再then方法中添加errorHandler,而是将errorHandler放到catch中
返回值为当前promise实例

then方法是定义在原型对象Promise.prototype上的，也就是说，Promise 实例具有then方法。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。如果使用两个then方法，第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

getJSON("/post/1.json").then( 
    post => getJSON(post.commentURL)
 ).then( 
    comments => console.log("Resolved: ", comments), 
    err => console.log("Rejected: ", err) 
); 

2、

Promise.prototype.catch(errorHandler)
errorHandler 当承诺失败的时候执行

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数，一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。

var promise = new Promise(function(resolve, reject) { 
    reject(new Error('test')); 
});
 promise.catch(function(error) { 
    console.log(error);
 });

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

3、

Promise.prototype.finally(handler)
handler 不管承诺对象的状态变为什么样子，这个handler函数都会执行

finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
下面是一个例子，服务器使用Promise处理请求，然后使用finally方法关掉服务器

server.listen(0).then(function(){
     // run test
 }) .finally(server.stop);    //关掉服务器

3) 高级特性
1.、

Promise.all([p1,p2,...])
将多个承诺对象合并为一个承诺对象，返回值为promise
Primese
.then((result)=>{
//当所有的承诺都resolved的时候该回调函数才会执行
// result 为每个承诺对象返回值组成的一个数组
　　})
　　.catch(()=>{
　　//当有一个承诺对象rejected就会执行这个回调函数
　　})
当查询出所有顾客信息以及订单信息后打开模态框

2.、

Promise.race([p1,p2,...])
将多个承诺对象合并为一个承诺对象，返回值为promise
promise
　.then((result)=>{
　　　　//只要有一个承诺对象的状态变为resolved，就会执行该回调函数
　　})
　.catch(()=>{
　　　　//只要有一个承诺对象的状态变为rejected，就会执行该回调函数
　　})

3.、

Promise.resolve(v)
　　将v转换为承诺对象

4、

 Promise.rejected(v)
　　返回一个状态为rejected的承诺对象

异步的解决方案：

传统ajax：

  let $ = {
  　　//使用回调
  　　get({url,success,error}){
  　　　　let xhr = new XMLHttpRequest();
  　　　　//设置请求行
  　　　　xhr.open("get",url);
  　　　　//设置请求头,标明请求体传递方式
  　　　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  　　　　//设置返回值
 　　　　xhr.responseType = "json";
 　　　　//设置请求体
 　　　　xhr.send();
　　　　 //监听机制
 　　　　xhr.onreadystatechange = function(){
 　　　　　　if(this.readyState === 4){
 　　　　　　　　if(this.status === 200){ 
 　　　　　　　　　　success(this.response);
 　　　　　　　　}else{
 　　　　　　　　　　error(this);
 　　　　　　　　}
 　　　　}
 　　}
 },

 $.get({
　　url:"http://134.175.100.63:6677/customer/findAll",
 　　success:function(response){
 　　　　console.log(response)
 　　},
 　　error:function(xhr){
　　　　 console.log(xhr)
 　　}
 })

Promise封装ajax：

 //使用promise承诺对象
 get_promise(url){
 　　return new Promise(function(resolve,rejected){
 　　　　let xhr = new XMLHttpRequest();
 　　　　//设置请求行
 　　　　xhr.open("get",url);
 　　　　//设置请求头,标明请求体传递方式
 　　　　xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 　　　　//设置返回值
 　　　　xhr.responseType = "json";
 　　　　//设置请求体
 　　　　xhr.send();
 　　　　//监听机制
 　　　　xhr.onreadystatechange = function(){
 　　　　　　if(this.readyState === 4){
 　　　　　　　　if(this.status === 200){
 　　　　　　　　　　//请求成功
 　　　　　　　　　　resolve(this.response);
 　　　　　　　　}else{
 　　　　　　　　　　//请求失败
 　　　　　　　　　　rejected(this);
 　　　　　　　　}
 　　　　　　}
 　　　　}
 　　})
 　　}
 }
 get_promise(
 　　"http://134.175.100.63:6677/customer/findAll"
 ).then((response)=>{
 　　//当promise的状态由 pending -> resolved
 　　console.log("顾客信息:",response);
 　}).catch((xhr)=>{
 　　//当promise的状态由 pengding -> rejected
 　　console.log(xhr);
 　　alert("异常")
 })