知道Promise对象的你,知道在使用Promise对象的时候,我们如何做到在使用中如鱼得水嘛?10分钟带你迅速上手!
一、Promise的诞生
1、回调地狱
最初javascript的异步实现就是使用回调函数。回调地狱就是:一个函数需要等它的回调函数(或者回调和回调的回调…)执行完毕之后再执行。简单来说,回调函数里面嵌套回调函数
。而因为回调地狱的问题,Promise就出现了。我们看看什么是回调地狱:
// 回调地狱
//地狱回调
setTimeout(function () { //第一层
console.log(1);//等4秒打印1,然后执行下一个回调函数
setTimeout(function () { //第二层
console.log(2);//等3秒打印2,然后执行下一个回调函数
setTimeout(function () { //第三层
console.log(3);//等2秒打印3,然后执行下一个回调函数
setTimeout(function () { //第四层
console.log(4);//等1秒打印4
}, 1000)
}, 2000)
}, 3000)
}, 4000)
可看出回调地狱的特点
:
1.难以复用
2.堆栈信息被断开
3.借助外层变量
回调地狱是为了让我们代码执行顺序的一种操作(解决异步),但是它会使我们的可读性非常差。当你有100个,1000个…,代码会不断右移,不够优雅,也会影响性能。嵌套和缩进只是回调地狱的一个梗而已,它导致的问题远非嵌套导致的可读性降低而已。接下里我们今天的目的,就是将上面的回调地狱用Promise解决。
二、Promise的行为
1、Promise的语法
Promise的基本语法
:Promise函数接收一个函数作为参数,这个函数有两个参数,一个是成功函数(resolve),一个是失败函数(reject)。Promise的.then接收两个回调函数,一个是成功函数的回调,一个是失败函数的回调。这两个函数可选,不一定要提供
//Promise语法
let myPromise = new Promise(function(resolve, reject) {
// "Producing Code"(可能需要一些时间)
resolve(); // 成功时
reject(); // 出错时
});
// "Consuming Code" (必须等待一个兑现的承诺)
myPromise.then(
function(value) { /* 成功时的代码 */ },
function(error) { /* 出错时的代码 */ }
);
特别注意:
(1)Promise对象中的状态不会被外界干扰。状态的改变取决于异步的操作结果。
(2)Promise对象的状态一旦被改变,就不会进行再次改变。 例如:
let myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');//第一次状态为成功
reject('no');//不会改变
})
}).then(
function (result) { console.log('resolved'); },//成功状态执行then后面的成功回调函数
function (error) { console.log('reject'); }
)
//resolved
(3)Promise新建后就会立即执行,Promise后面的.then是一个异步操