前言
今天来分享下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 here
I 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 error
at 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 processing
return promiseB(…);
}).then(function(resultB) {
// More processing
return // How do I gain access to resultA here?
});
}
解决 Break the chain
function getExample() {
var a = promiseA(…);
var b = a.then(function(resultA) {
// some processing
return promiseB(…);
});
return Promise.all([a, b]).then(function([resultA, resultB]) {
// more processing
return // something using both resultA and resultB
});
}
