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

快来打我* 2023-01-01 05:00 112阅读 0赞

本篇文章介绍Promise的基本。

一、Promise的基本理解

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

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

二、基本流程

![Image 1][]

(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输出成功的结果：

![Image 1][]

console输出失败的结果：

![Image 1][]

四、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)

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

//使用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)

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

[Image 1]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

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

相关回调地狱的解决方式

相关 Promise是什么？Promise怎么使用？回调地狱

相关回调地狱的解决方式总结

相关 promise，回调地狱

相关回调地狱

相关从回调地狱谈Promise

相关异步回调发展（地狱回调）

相关 ES6-Promise()解决回调地狱

相关回调地狱的多种解决方式