深入浅出了解Promise
引言
我们都知道，一个好的代码是有很强的维护性、阅读性的， 但是在Jacascript中的回调函数的量一增多， 很容易影响代码的阅读性，导致代码难以维护， 这种现象就叫做回调地狱， 为了解决这现象， ES6将Promise写进了语言标准里， 专门用来解决这个回调地狱的现象， 那么就让我们来了解一下吧。
正文
一、Promise简介
Promise 是异步编程的一种解决方案， 他能使得各种异步操作，都用同样的方式去处理， 将代码变得非常的统一， 使得维护和阅读都便利了很多， 我们现在简单看一下， 不用Promise时，回调函数的数量很多的时候的代码，以及使用Promise以后的代码吧。
- 不使用Promise
$.ajax({
url: '/index',
type: 'get',
dataType: 'json',
success: function (data1) {
$.ajax({
url: '/home',
type: 'get',
dataType: 'json',
data: data1,
success: function (data2) {
$.ajax({
url: '/about',
type: 'get',
dataType: 'json',
data: data2,
success: function (data3) {
$.ajax({
url: '/me',
type: 'get',
dataType: 'json',
data: data3,
success: function (data4) {
console.log(data4)
}
})
}
})
}
})
}
})
- 使用Promise
new Promise(resolve => {
$.ajax({
url: '/index',
type: 'get',
dataType: 'json',
success: function (data1) {
resolve(data1)
}
})
})
.then(data1 => {
$.ajax({
url: '/home',
type: 'get',
dataType: 'json',
data: data1,
success: function (data2) {
resolve(data2)
}
})
})
.then(data2 => {
$.ajax({
url: '/about',
type: 'get',
dataType: 'json',
data: data2,
success: function (data3) {
resolve(data3)
}
})
})
.then(data3 => {
$.ajax({
url: '/index',
type: 'get',
dataType: 'json',
data: data3,
success: function (data4) {
console.log(data4)
}
})
})
使用或不使用Promise， 这区别已经很明显了吧， 显而易见，使用完Promise后， 这种回调函数里面嵌套回调函数的代码就变得很简洁，耐看，那我们就开始学习Promise的使用吧
二、Promise的三种状态
- pending: 等待状态，比如正在网络请求, 或定时器没有到时间
- fulfill: 满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调then函数
- reject: 拒绝状态，当我们主动回调了reject时 , 就处于该状态，并且会回调catch函数
三、函数then( )
函数 then 是Promise中的一个方法， 它会在Promise 处于 fulfill 状态时调用触发。
resolve 和 reject 是默认传入的的函数参数
new Promise((resolve, reject) => {
setTimeout(() => {
//在Promise调用resolve函数，会使Promise变为 fulfill状态
//resolve函数可以传入一个参数，作为then函数的默认传入参数
resolve('成功')
}, 1000)
})
.then(data => {
console.log(data)
})
//结果输出： 成功
四、函数catch( )
函数 catch 是Promise中的一个方法， 它会在Promise 处于 reject 状态时调用触发。
new Promise((resolve, reject) => {
setTimeout(() => {
//在Promise调用reject函数，会使Promise变为 reject 状态
//reject函数可以传入一个参数，作为catch函数的默认传入参数
reject('失败')
}, 1000)
})
.catch(err => {
console.log(err)
})
//结果输出： 失败
五、函数finally( )
函数 finally 是Promise中的一个方法， 它会在Promise 的最后触发，无论Promise处于什么状态。
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('成功啦')
}, 1000)
})
.then(data => {
console.log(data)
})
.finally(() => {
console.log('Promise结束')
})
/*结果输出： 成功啦
Promise结束
*/
new Promise((resolve, reject) => {
setTimeout(() => {
reject('失败')
}, 1000)
})
.catch(err => {
console.log(err)
})
.finally(() => {
console.log('Promise结束')
})
/*结果输出： 失败
Promise结束
*/
可以看到，无论Promise是处于 fulfill 状态 ，还是 reject 状态， 最终都会执行finally函数
六、函数all( )
函数 all 是Promise 中的一个方法，他用于将多个Promise 实例， 包装成一个新的Promise 实例
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('我是第一个异步请求返回的数据')
},3000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('我是第二个异步请求返回的数据')
},1000)
})
])
.then(results => {
console.log(results)
})
// ['我是第一个异步请求返回的数据', '我是第二个异步请求返回的数据']
上述代码中， all 函数传入一个数组，数组中的每个元素都是一个Promise实例， 只有当数组中的每个Promise实例都处于 fulfill 状态时，才会调用外部新包装成的Promise 的 then方法， 并且这个 then 方法默认传入一个数组参数，该数组参数中的每个元素为 all 函数中每个实例参数 resolve 传回的数据。
七、实际应用
需求说明： 传入一个字符串 string1 = ’ I am '，然后1秒后，在string1后面加上一个字符串 ’ Lpyexplore ’ ， 得到一个新的字符串 string2 = ’ I am Lpyexplore ’ ， 然后再过1秒后，在string2 后面加上一个字符串 ’ in CSDN ’ ，得到又一个新的字符串 string3 = ’ I am Lpyexplore in CSDN ’ ， 然后打印字符串 string3 ， 同时输出打印 ’ Promise结束 ’
let string1 = 'I am '
new Promise((resolve, reject) => {
setTimeout(() => {
let string2 = string1 + 'Lpyexplore '
resolve(string2)
}, 1000)
})
.then(data => {
return new Promise((resolve, reject) => {
let string3 = data + 'in CSDN'
resolve(string3)
})
})
.then(data => {
console.log(data)
})
.finally(() => {
console.log('Promise结束')
})
// 输出结果：
// I am Lpyexplore in CSDN
// Promise结束
结束语
相信大家对Promise都有了一定的了解了吧， 以后可以将多重回调的代码用Promise 来写， 写出优雅耐看的代码，让自己舒心，让领导放心，嘻嘻。