ES6 异步编程Promise then catch finally的使用

在javascript中有两种实现异步的方式，首先第一种是传统的回调函数，另外一种是通过promise.

一.回调函数实现异步.

setTimeout(() => {
    console.log('settimout');//后打印
}, 0);
console.log('settimout之后');//先打印

     回调函数虽然简单，但是有一个明显的缺点，如果需要依次执行多个异步操作，为了保证顺序就需要回调函数中嵌套。这种回调嵌套不断的嵌套就会形成回调地狱.

二.promise对象

       2.1 primise语法如下:

new Promise((resolve,reject)=>{
   
})

      Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

       2.2   Promise三种状态

• pending: 等待中，表示Promise中的异步处理还没有得到结果.

• fulfilled:  已成功，表示已经得到正确的结果，可以继续往后执行.

• rejected: 已失效，表示也得到了结果，但是并不是我们需要的.

      2.3 状态改变

            1 ) 调用resolve时，将Promise的状态从pending变成fulfilled. 在异步操作成功时调用，并将异步操作的结果，作为参数传递出去.

           2 ) 调用reject时，将Promise的状态从pending变成rejected.  在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

  例:

let p1=new Promise((resolve,reject)=>{
})
console.log('p1',p1);//pending
let p2=new Promise((resolve,reject)=>{
    resolve();
})
console.log('p2',p2);//fulfilled
let p3=new Promise((resolve,reject)=>{
    reject();
})
console.log('p3',p3);//rejected

打印结果: 

再看下面一个例子:

let p1=new Promise((resolve,reject)=>{
})
console.log('p1',p1);
let p2=new Promise((resolve,reject)=>{
	setTimeout(()=>{
      	resolve();
 	},5000)
});
console.log('p2',p2);

 打印结果如下:

      此处p2的状态: 外面是pending状态，里面PromiseState处 如果在5秒内打开是pending状态，如果在5秒之后打开是fulfilled状态.那么如何能让外面也是fulfilled状态呢?

解决方法如下:

let p1=new Promise((resolve,reject)=>{
})
console.log('p1',p1);
let p2=new Promise((resolve,reject)=>{
       setTimeout(()=>{
           resolve();
        },5000)
 });
 setTimeout(() => {
      console.log('p2',p2);
 }, 6000);

 此时打印结果如下:

 三.then 方法

       3.1  基本使用

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

           注意：状态如果是pending状态的是不会执行then方法中的相关回调函数的.

       3.2 语法如下:

promise.then(()=>{
  // success
},()=>{
  // failure
});

       then方法第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数，then方法返回的是新的Promise实例 .

    3.3 注意:

    1.如果状态为fulfilled / resolved  会进入到then的第一个参数（第一个回调函数）

const p1=new Promise((resolve,reject)=>{
     resolve();
})
p1.then(()=>{
     console.log('success');// 打印结果为success
},()=>{
     console.log('failure');
})

     2.如果状态为rejected  会进入到then的第二个参数（第二个回调函数） 

const p1=new Promise((resolve,reject)=>{
     reject();
})
p1.then(()=>{
     console.log('success');
},()=>{
     console.log('failure');// 结果为failure
})

       PS. 执行then方法时，返回值也是一个Promise对象，如果在then的回调函数中不抛出异常，它的状态一直为fulfilled状态.

例如:

  let p1 = new Promise((resolve, reject) => {
            resolve(1);
        })
        let p2 = p1.then(val => {
            console.log(val);

        }, wrong => {
            console.log(wrong);
        })
        console.log('p2', p2);

 打印结果如下:

       反之, 如果then的回调函数中抛出了异常，那么返回值Promise对象的状态就是rejected.

 例如:

 let p1 = new Promise((resolve, reject) => {
            resolve(1);
        })
        console.log('p1', p1);
        let p2 = p1.then(val => {
            throw new Error("错误代码");
            console.log(val);
        }, wrong => {
            console.log(wrong);
        })
        console.log('p2', p2);

运行结果如下: 

四.catch方法

          4.1 基本使用

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

p.then(value=>{
    
}).catch(err=>{
    console.log("失败");
})

对比以下两段代码:

 代码1
let p1 = new Promise((resolve, reject) => {
            reject('failure');
        }).catch(error => {
            console.log(error);//failure
        })

代码2
let p1 = new Promise((resolove, reject) => {
            reject('failure');
        }).then(null, error => {
            console.log(error);//failure
        });

       以上两个代码是等价的，如果Promise对象状态变成了rejected，代码1 是进入到catch方法指定的回调函数中去。 .代码2 是调用then方法中第2个参数的回调函数.

五.finally()

        该方法用于指定不管Promise对象最后状态任何，都会执行的操作。

语法:

promise
.then(result=>{...})
.catch(error=>{...})
.finally(()=>{...})

例: 

let p1=new Promise((resolve,reject)=>{
         resolve(12);
       })
       p1.then(val=>{
           console.log(val);//12
       })
       p1.catch(err=>{
           console.log(err);
       })
       p1.finally(()=>{
           console.log('最终都要执行');//最终都要执行
       })