深入了解Promise对象，写出优雅的回调代码，告别回调地狱

深入浅出了解Promise

• 引言
• 正文
• 一、Promise简介
• 二、Promise的三种状态
• 三、函数then( )
• 四、函数catch( )
• 五、函数finally( )
• 六、函数all( )
• 七、实际应用
• 结束语

引言

我们都知道，一个好的代码是有很强的维护性、阅读性的， 但是在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的三种状态

1. pending: 等待状态，比如正在网络请求, 或定时器没有到时间
2. fulfill: 满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调then函数
3. 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 来写， 写出优雅耐看的代码，让自己舒心，让领导放心，嘻嘻。