Javascript对象Promise的使用详述

Promise是一个javascript的对象，它可以帮助处理实现异步编程。还可以将请求数据与数据的处理代码进行分离，使代码更加优雅。

1、Promise的基本使用

new Promise((resolve, reject) => {
	let flag = true;
	if(flag){
		resolve('Hello World');
	}else{
	    reject('Error Message');
	}
}).then((data)=>{//resolve回调函数（数据的处理代码）
    console.log(data);
}).catch((e)=>{//reject回调函数（异常的处理代码）
    console.log(e);
})

上述代码中调用resolve方法时会执行then中的代码，并将resolve方法中的数据传入then函数。调用reject方法则会进入catch函数，且会将reject方法中的参数传入。Promise还有下面一种写法：

 new Promise((resolve, reject) => {
     // reject('aaa');
     resolve('bb')
 }).then(data=>{
     console.log(data);
 },err=>{
     console.log(err);
 })

2、Promise的三种状态

pending：等待状态，比如正在进行网络请求，或定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve是，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

3、Promise的分层处理

（1）原始写法

//Promise的分层处理
new Promise((resolve, reject) => {
   resolve('aaa');
}).then(res1=>{
   return new Promise((resolve) =>{//第一层处理
       resolve(res1 + '111');
   });
}).then(res2=>{//第二层处理
   return new Promise((resolve)=>{
       resolve(res2 + '2222')
   })
}).then(res3 =>{//第三层处理
   console.log(res3);
})

（2）优化，使用Promise.resolve()

    new Promise((resolve, reject) => {
        resolve('bb');
    }).then(data=>{
        return Promise.resolve(data + 'ccc');
    }).then(data=>{
        return Promise.reject(data + 'ddd');
    }).catch(data=>{
        console.log(data);
    })

（3）最终优化，省略Promise.resolve()。

    new Promise((resolve, reject) => {
        // resolve('bb');
        throw 'Error Message'
    }).then(data=>{
        return data + 'ccc';
    }).then(data=>{
        return data + 'ddd';
    }).then(data=>{
        console.log(data);
    }).catch(data=>{
        console.log(data);
    })

4、Promise的all方法使用

Promise的all方法用于同时处理二次请求的情况。

    Promise.all([
        new Promise((resolve, reject) => {
            setTimeout(function () {
                // throw 'Error Message ff'
                resolve('111');
            },100)
        }),
        new Promise((resolve, reject) => {
            setTimeout(function(){
                resolve('222')
            },100)
        })
    ]).then(results => {
        console.log(results);
        console.log('请求结果1' + results[0]);
        console.log('请求结果2' + results[1]);
    }).catch(err =>{
        console.log(err)
    })