共计 6906 个字符，预计需要花费 18 分钟才能阅读完成。
## 前言
今天来分享下 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
});
}