你真的会用 Promise 吗，快来看看正确的写法！！！

最新推荐文章于 2025-08-19 14:18:39 发布

原创最新推荐文章于 2025-08-19 14:18:39 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise #async/await #异步 #javascript #前端

javascript知识专栏收录该内容

20 篇文章

订阅专栏

本文探讨了解决回调地狱的三种方法：传统的Promise链式调用、升级版的return后续请求以及async/await的使用。通过对比，展示了async/await如何使代码更加清晰和易于理解。

这个思路，是受到 七月老师的教导的

当我们遇到回调地狱，通常都是怎么解决的呢，如果不使用 async/await，那么写出来的代码，大部分（包括我）都是又臭又长的，不忍直视，那么使用下面的写法，会更加赏心悦目哦

1.第一种，普通的写法

 bookModel.getHotList().then(res => {
      console.log(res)
      bookModel.getMyBookCount().then(res => {
        console.log(res)
        bookModel.getMyBookCount().then(res => {
          console.log(res)
        })
      })
    })

这只是简单的三层嵌套，还没有加上处理的函数，便已经无法直视了

2. 升级版写法

bookModel.getHotList()
      .then(res => {
        console.log(res)
        return bookModel.getMyBookCount()
      })
      .then(res => {
        console.log(res)
        return bookModel.getMyBookCount()
      })
      .then(res => {
        console.log(res)
      })

就是把后续的请求 return 出去，在外面执行后续方法，怎么样，是不是看起来舒服了很多，更有条理性了呢

3. async/await 写法

async function network() {
	const res = await bookModel.getHotList()
	console.log(res)

	const res2 = await bookModel.getMyBookCount()
	console.log(res2)

	const res3 = await bookModel.getMyBookCount()
	console.log(res3)
}

async/await 太香啦！！