JS-Promise的缺点和解决方案，JavaScript的常用内置函数-CSDN博客

本文链接：https://blog.csdn.net/2301_79055083/article/details/137361794

文章介绍了如何使用Promise和async/await处理异步任务，尤其是解决Promise链式调用中的数据共享问题。作者通过实例展示了如何避免公式形式的代码和then方法占用return的问题，并强调了async和await作为Promise语法糖的价值。此外，还提到了前端开发中获取学习资源的建议。

摘要由CSDN通过智能技术生成

console.log(new Date)

let p1 = function(){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve()

},1000)

})

}

let p2 = function(){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve()

},2000)

})

}

let p3 = function(){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve()

},3000)

})

}

p1().then(()=>{

console.log(new Date,1)

return p2()

}).then(()=>{

console.log(new Date,2)

return p3()

}).then(()=>{

console.log(new Date,3)

})

再举个例子

我要在1s的时候打印1，之后2s打印2，之后3s将前两次打印结果拼接在一起打印

Promise实现

console.log(new Date)

let p1 = function(){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve()

},1000)

})

}

let p2 = function(){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve()

},2000)

})

}

let p3 = function(){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve()

},3000)

})

}

let v1 = ‘’;

let v2 = ‘’;

p1().then(()=>{

v1 = 1

console.log(new Date,v1)

return p2()

}).then(()=>{

v2 = 2

console.log(new Date,v2)

return p3()

}).then(()=>{

console.log(new Date,v1+‘’+v2)

})

由于then方法的return都用来返回下一次then调用者了，所以无法再传递打印的结果。

总结Promise的缺点

============

1、公式形式的代码太多了…

封装Promise对象多出一大坨，链式调用then多出一大坨，虽然都是必要的。

2、then方法链式调用占用了return，造成其他想要共享数据被锁在了then方法作用域中，无法直接对外提供，只能定义额外全局变量来实现共享。

解决方案：async和await

================

async和await可以算是Promise的语法糖，即将大坨的公式代码封装到底层，对外提供精简的语法关键字，后面解析到对应关键字，自动生成公式代码。

async用来简化“Promise封装异步函数”的定义

async语法上用于修饰一个函数

async的作用是将被修饰函数的返回值封装为Promise对象

即：async函数可以返回是一个Prmise对象，该Promise对象的状态和结果取决于async函数的**return返回值,**规则和then方法的返回的Promise对象生成的规则相同。

即：如果async函数的return value是一个非Promise对象，则返回一个成功状态，结果为value的Promise对象。

如果async函数的return value是一个Promise对象，则返回一个状态为value的状态，结果为value的结果的对象。

如果async函数运行抛出异常，则返回一个状态为失败，结果为异常信息的Promise对象。

const fs = require(‘fs’)

let p1 = new Promise((resolve,reject)=>{

fs.readFile(‘./1.txt’,‘utf8’,(err,res)=>{

if(err) {

reject(err)

} else {

resolve(res)

}

})

async function fn(){

let result = null

let error = null

fs.readFile(‘./1.txt’,‘utf8’,(err,res)=>{

error = err//异步代码，后执行

result = res

})

if(error){//同步代码，先执行

throw error

} else {

return result

}

let p2 = fn()

setTimeout(()=>{

console.log(‘p1’,p1)

console.log(‘p2’,p2)

})

关于async函数return的是非Promise类型值的例子，我们这边很难举出来。

因为我们期望async函数代替原来的new Promise封装异步任务动作，但是async函数内部无法使用resolve和reject，所以想要改变async返回的Promise对象的状态和结果，只能依赖于return和throw。而异步任务的执行肯定是晚于同步代码return和throw。

所以如果async函数的return值依赖于封装的异步任务的结果，则无法实现。

实例请看，上面代码的async函数fn。

所以async函数的return值通常就是一个Promise对象，这样就不依赖于return和throw了。

综上所述：

async函数适用于return一个Promise对象的情况。但是我们就是期望async来解决new Promise的公式代码问题，如果需要自己定义一个Promise对象作为async函数的返回值，何必要经过一层async呢？
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。