使用promise解决回调地狱_前端开发之JavaScript篇（5）——Promise的使用（异步编程、解决回调地狱（async/await））...

本篇文章介绍Promise的基本。

一、Promise的基本理解

1、Promise是用于异步编程的一个解决方法，用时可以用new来创建对象进行异步操作封装并处理结果。

2、一个promise对象只有两种状态：resolved和rejected。

二、基本流程

(1)当异步操作执行成功，状态为resolved，则执行resolve()，并使用then()处理结果。

(2)当异步操作执行失败，状态为rejected，则执行reject()，并使用then()/catch()处理结果。

三、基本使用

// 1、创建一个新的Promise对象

const p = new Promise((resolve,reject)=>{    //执行器函数    --同步回调

// 2、执行异步操作任务

setTimeout(()=>{

const num = parseInt(Math.random()*100);

if(num%5===0){    // 3.1 如果成功了，调用resolve(value)

resolve("成功，我是"+num);

}else{    // 3.1 如果失败了，调用reject(reason)

reject("失败，我是"+num)

}

},1000)

})

p.then(

value=>{//接受得到成功的value数据 --onResolved

console.log(value)

},

reason=>{//接受得到失败的reason数据 --onRejected

console.log(reason)

}

)

console输出成功的结果：

console输出失败的结果：

四、promise的灵活性

promise灵活性，即在取得结果后，可以不用立即处理。

//举例： 3秒后才处理结果

setTimeout(()=>{

p.then(

value=>{//接受得到成功的value数据 --onResolved

console.log(value)

},

reason=>{//接受得到失败的reason数据 --onRejected

console.log(reason)

}

)

},3000)

五、promise的链式调用

promise的链式调用可以解决回调地狱

//回调地狱    --这里只简单举例说明，不详细说明

one(function(result){

two(result,function(newResult){

three(newResult,function(newNewResult){

......

//一直回调下去，结果展现出来的代码就一直往右挪

},failCallback)

},failCallback)

},failCallback)

————————————————————————————————————

//使用promise链式调用解决回调地狱    --同样，只举例简单说明

one().then(function(result){

return two(result)

})

.then(function(newResult){

return three(newResult)

})

.then(function(newNewResult){

return four(newNewResult)

})

.......    //这样一直回调下去，代码更加可观

.catch(failCallback)    //异常传透

六、补充：回调地狱的最终解决方案——async/await

同样，上面promise的链式回调，还是存在回调函数，这里介绍目前最终解决回调地狱的方案是async/await。

将上面链式调用的代码改为使用async/await后如下：

async function request(){

try{

const result = await one();

const newResult = await two(result);

const newNewResult = await three(newResult);

console.log(newNewResult)

}catch(err){

failCallback(err)

}

}

好了，这篇文章就介绍到这，喜欢的点一个赞呗！