JS面试题之回调地狱与Promise

最新推荐文章于 2024-08-06 12:58:11 发布

下一站是未知

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量101

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43583236/article/details/129695588

版权

文章讲述了回调地狱的概念，即在异步编程中由于多级回调导致的代码难以理解和维护的问题。然后介绍了Promise和async/await两种解决方案，Promise通过链式调用来改善代码结构，而async/await则提供了更接近同步编程的体验，提高了代码的可读性和可维护性。

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

1.什么是回调地狱？

答：回调函数不会立即执行，只有当满足一定条件后或等待一段时间后才会执行。例如定时器和ajax中就使用了回调函数。

存在异步任务的代码，不能按照顺序执行，为了得到我们想要的顺序，可以在回调函数中嵌套回调函数，当出现多级嵌套时，就形成了回调地狱。代码不具备可读性、难以维护。

    function getTea (fn) {
      setTimeout(() => {
        fn('奶茶')
      }, 1000)
    }
    function getHotPot (fn) {
      setTimeout(() => {
        fn('火锅')
      }, 2000)
    }
    // getTea(function(data) {
    //   console.log(data)
    // })  喝奶茶

    //先吃火锅，再喝奶茶
    getHotPot(function(data) {
      console.log(data)
      getTea(function(data) {
        console.log(data)
        getTea(function(data) {
          console.log(data)
          getTea(function(data) {
            console.log(data)
          })
        })
      })
    })

2.promise

    function getTea () {
      return new Promise(function(resolve) {
        setTimeout(() => {
          resolve('奶茶')
        }, 1000)
      })
    }

    function getHotPot () {
      return new Promise(function(resolve) {
        setTimeout(() => {
          resolve('火锅')
        }, 1000)
      })
    }
    getHotPot().then(data => {
      console.log(data);
      return getTea();
    }).then(data => {
      console.log(data);
      return getTea();
    }).then(data => {
      console.log(data)
    })

3.async与await实现

     //async
    function getTea () {
      return new Promise(function(resolve) {
        setTimeout(() => {
          resolve('奶茶')
        }, 1000)
      })
    }

    function getHotPot () {
      return new Promise(function(resolve) {
        setTimeout(() => {
          resolve('火锅')
        }, 2000)
      })
    }

    async function getData () {
      let hotPot = await getHotPot()
      console.log(hotPot)
      let tea = await getTea()
      console.log(tea)
    }
    // 调用async函数
    getData()