promise

## 前言

今天来分享下promise的用法，es6伟大发明之一，当初我学习的时候也是蛮头大的，不知道为啥，整个脑子就是，我在哪，我要干啥的懵圈，后面认真学习之后，觉得真是十分好用，下面就来一起学习下吧。

为什么会有promise

首先为什么会有promise的存在，其实很多人都知道的，其中最大的问题就是在处理多个有依赖关系的异步操作时，会出现回调地狱（ callback hell ），如下：

$.ajax({url: '....',success: function (data) {$.ajax({url: '....',success: function (data) {}});}});

promise提供了一个优雅的方式，来解决这个问题，同时提供了很多的错误捕获机制。

如何使用promise

我们先不讲promise的理论语法，这样会一开始就降低学习的欲望，直接来看使用案例，然后去理解。

首先看基本使用

new Promise(function (resolve, reject) {// 假设此处是异步请求某个数据$.ajax({url: '......',success: function (res) {if (res.code === 200) {resolve(res.data);} else {reject('获取data失败');}}})
})
.then(function A(data) {// 成功，下一步console.log( data);}, function B(error) {// 失败，做相应处理console.log(error)});
console:
sucess
error

解析：

梳理流程：

首先我们在promise函数里，执行我们的异步操作得到data
如果成功的话，通过resolve函数数据传递出来，如果失败。通过reject把错误信息传递出来
然后在.then里可以接受传递出来的数据，.then()里面接受两个函数，第一个函数接收resolve传递出来的值，也就是正确情况下的处理，第二个函数接收reject传递的信息，也就是错误的情况下的处理。

Promise是一个对象，它的内部其实有三种状态。

初始状态（ pending ）。
已完成（ fulfilled ）： Promise 的异步操作已结束成功。
已拒绝（ rejected ）： Promise 的异步操作未成功结束。

resolve 方法可以使 Promise 对象的状态改变成成功，同时传递一个参数用于后续成功后的操作。
reject 方法则是将 Promise 对象的状态改变为失败，同时将错误的信息传递到后续错误处理的操作。

then(onFulfilled, onRejected)

---(onFulfilled, onRejected)

链式then

当然，我们既然解决回调地狱，一个异步，看不出来啥优势，现在看多个异步请求, 为了代码简约，我们用setTimeout来代替ajax请求作为异步操作，如下：

new Promise((resolve, reject) => {setTimeout( () => {if （...）{resolve（[1, 2, 3]）} else {reject('error');}}, 2000);
}).then( data => {console.log(value);  // 打印出[1, 2, 3]return new Promise( (resolve, reject)=> {   // 新的异步请求，需要promise对象let data2 = 1 + data;setTimeout( () => {if (...) {resolve(data2);} else {reject('error2')}}, 2000);});}, error => {cosnole.log(error)})
.then( data2 => {console.log(data2 );}, error => {cosnole.log(error)});

解析：

-这个例子中，第一个异步操作得到数据[1, 2, 3]，传递到第一个then中，我们在第一个then中运用拿到的数据，进行第二次异步操作，并把结果传递出去。在第二个then中拿到数据,并且捕获error。
可以看到本来嵌套的两个异步操作，现在清晰多了，而且链式接无数个then

在这里有两个地方需要注意

then里面的可捕获错误的函数，可以捕获到上面的所有then的错误，所以只在最后一个then里，写错误捕获函数就可以。
每次异步操作时候需要返回一个新的promise，因为只有用promise对象才会等异步操作执行完，才去执行下面的then，才能拿到异步执行后的数据，所以第二个then里的异步请求，也需要声明Promise对象。如果then里面返回常量，可以直接返回。如下：

new Promise((resolve, reject) => {setTimeout( () => {if （...）{resolve（[1, 2, 3]）} else {reject('error');}}, 2000);
}).then( value => {return '222';    // 如果是直接返回常量，可直接return}).then( value2 => {console.log(value2 ); // 打印出222})

下面忽略error情况，看两个例子，大家可以自己思考下打印结果

new Promise(resolve => {setTimeout( () => {resolve('value1');}, 2000);
}).then( value1 => {console.log(value1);(function () {return new Promise(resolve => {setTimeout(() => {console.log('Mr.Laurence');resolve('Merry Xmas');}, 2000);});}());return false;}).then( value => {console.log(value + ' world');});value1
false world
Mr.Laurence

new Promise( resolve => {console.log('Step 1');setTimeout(() => {resolve(100);}, 1000);
})
.then( value => {return new Promise(resolve => {console.log('Step 1-1');setTimeout(() => {resolve(110);}, 1000);}).then( value => {console.log('Step 1-2');return value;}).then( value => {console.log('Step 1-3');return value;});
})
.then(value => {console.log(value);console.log('Step 2');
});console:
Step 1
Step 1-1
Step 1-2
Step 1-3
110
Step 2

catch

catch 方法是 then(onFulfilled, onRejected) 方法当中 onRejected 函数的一个简单的写法，也就是说可以写成 then(fn).catch(fn)，相当于 then(fn).then(null, fn)。使用 catch 的写法比一般的写法更加清晰明确。我们在捕获错误的时候，直接在最后写catch函数即可。

 let promise = new Promise(function(resolve, reject) {throw new Error("Explosion!");
});
promise.catch(function(error) {console.log(error.message); // "Explosion!"
});

上面代码等于与下面的代码

 let promise = new Promise(function(resolve, reject) {throw new Error("Explosion!");
});
promise.catch(function(error) {console.log(error.message); // "Explosion!"
});

异步代码错误抛出要用reject

new Promise( resolve => {setTimeout( () => {throw new Error('bye');}, 2000);
})
.then( value => {})
.catch( error => {console.log( 'catch', error);});
控制台会直接报错 Uncaught Error: bye

解析：因为异步情况下，catch已经执行完了，错误才抛出，所以无法捕获，所以要用reject，如下：

new Promise( (resolve, reject) => {setTimeout( () => {reject('bye');}, 2000);
})
.then( value => {console.log( value + ' world');})
.catch( error => {console.log( 'catch', error);});catch bye
利用reject可以抓捕到promise里throw的错

catch 可以捕获then里丢出来的错，且按顺序只抓捕第一个没有被捕获的错误

new Promise( resolve => {setTimeout( () => {resolve();}, 2000);
})
.then( value => {throw new Error('bye');})
.then( value => {throw new Error('bye2');})
.catch( error => {console.log( 'catch', error);});console: Error： bye

new Promise( resolve => {setTimeout( () => {resolve();}, 2000);
})
.then( value => {throw new Error('bye');})
.catch( error => {console.log( 'catch', error);})
.then( value => {throw new Error('bye2');})
.catch( error => {console.log( 'catch', error);});console: Error： bye
console: Error： bye2
catch 抓捕到的是第一个没有被捕获的错误

错误被捕获后，下面代码可以继续执行

new Promise(resolve => {setTimeout(() => {resolve();}, 1000);
}).then( () => {throw new Error('test1 error');}).catch( err => {console.log('I catch：', err);   // 此处捕获了 'test1 error'，当错误被捕获后，下面代码可以继续执行}).then( () => {console.log(' here');}).then( () => {console.log('and here');throw new Error('test2 error');}).catch( err => {console.log('No, I catch：', err);  // 此处捕获了 'test2 error'});I catch： Error: test2 error
here
and hereI catch： Error: test2 error

错误在捕获之前的代码不会执行

new Promise(resolve => {setTimeout(() => {resolve();}, 1000);
}).then( () => {throw new Error('test1 error');}).catch( err => {console.log('I catch：', err);   // 此处捕获了 'test1 error'，不影响下面的代码执行throw new Error('another error'); // 在catch里面丢出错误，会直接跳到下一个能被捕获的地方。}).then( () => {console.log('and here');throw new Error('test2 error');}).catch( err => {console.log('No, I catch：', err);  // 此处捕获了 'test2 error'});I catch： Error: test2 error
I catch： Error: another error

new Promise(resolve => {setTimeout(() => {resolve();}, 1000);
}).then( () => {console.log('start');throw new Error('test1 error');}).then( () => {console.log('arrive here');}).then( () => {console.log('... and here');throw new Error('test2 error');  }).catch( err => {console.log('No, I catch：', err);   // 捕获到了第一个});No, I catch： Error: test1 errorat Promise.then (<anonymous>:8:1

Promise.all

Promise.all([1, 2, 3]).then( all => {console.log('1：', all);})
[1, 2, 3]

Promise.all([function () {console.log('ooxx');}, 'xxoo', false]).then( all => {console.log( all);});[ƒ, "xxoo", false]

let p1 = new Promise( resolve => {setTimeout(() => {resolve('I\'m P1');}, 1500);
});
let p2 = new Promise( (resolve, reject) => {setTimeout(() => {resolve('I\'m P2');}, 1000);});
let p3 = new Promise( (resolve, reject) => {setTimeout(() => {resolve('I\'m P3');}, 3000);});Promise.all([p1, p2, p3]).then( all => {console.log('all', all);
}).catch( err => {console.log('Catch：', err);
});all (3) ["I'm P1", "I'm P2", "I'm P3"]

案例：删除所有数据后，做一些事情、、、、
db.allDocs({include_docs: true}).then(function (result) {return Promise.all(result.rows.map(function (row) {return db.remove(row.doc);}));
}).then(function (arrayOfResults) {// All docs have really been removed() now!
});

Promise.resolve

Promise.resolve().then( () => {console.log('Step 1');})

其他

Promise.resolve('foo').then(Promise.resolve('bar')).then(function (result) {console.log(result);
});
VM95:2 foo
如果你向 then() 传递的并非是一个函数（比如 promise）
它实际上会将其解释为 then(null)，这就会导致前一个 promise 的结果会穿透下面

How do I gain access to resultA here?

function getExample() {return promiseA(…).then(function(resultA) {// Some processingreturn promiseB(…);}).then(function(resultB) {// More processingreturn // How do I gain access to resultA here?});
}

解决 Break the chain

function getExample() {var a = promiseA(…);var b = a.then(function(resultA) {// some processingreturn promiseB(…);});return Promise.all([a, b]).then(function([resultA, resultB]) {// more processingreturn // something using both resultA and resultB});
}