js promise，async异步数据链式获取---回调地狱

最新推荐文章于 2024-05-04 21:56:09 发布

原创最新推荐文章于 2024-05-04 21:56:09 发布 · 367 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

背景：逛街你要喝奶茶、吃火锅、做美甲。但是你想要先吃火锅再喝奶茶最后再去做美甲。

在es5的时候，会通过回调函数获取异步数据。会有以下的这种写法

//获取食品的方法
        function getTea(fn) {
            setTimeout(() => {
                fn('奶茶')
            }, 500)
        }
        function getHotPot(fn) {
            setTimeout(() => {
                fn('火锅')
            }, 2000)
        }
        function getBe(fn) {
            setTimeout(() => {
                fn('美甲')
            }, 1000)
        }
        //调用获取方法
        getTea((data) => console.log(data));
        getHotPot((data) => console.log(data));
        //如果想先吃火锅再吃奶茶就得
        getHotPot(function (data) {
            console.log(data)
            getTea(function (data) {
                console.log(data)
                getBe(function (data) {
                    console.log(data)
                })
            })
        })

这样很难维护，要控制顺序就需要嵌套如果出现bug很难修,ES6出现了promise之后就不用回调函数获取异步数据了,接下来我们对上面的代码进行改造。

// promise对象 --resolve可以将异步数据传出来
      let p = new Promise(function (resolve) {
          resolve(data)
      })
      p.then((data) => {
          console.log(data)
      })
      //改造上述问题代码
      function getTea() {
          return new Promise((resolve) => {
              resolve('奶茶')
          })
      }
      function getHotPot() {
          return new Promise((resolve) => {
              setTimeout(() => {
                  resolve('火锅')
              }, 2000)
          })
      }
      function getBe() {
          return new Promise((resolve) => {
              resolve('美甲')
          })
      }
      //先吃火锅再吃奶茶再做美甲
      getHotPot().then(function (data) {
          console.log(data);
          return getTea()
      }).then(function (data) {
          console.log(data);
          return getBe()
      }).then(function (data) {
          console.log(data);
      })

接下来我们用async函数来实现,async函数中有await 可以获取返回的异步数据，另外async函数的返回值是promise对象

//用async函数操作
        async function getData(){
            let HotPot = await getHotPot();
            console.log(HotPot);
            let Tea = await getTea();
            console.log(Tea);
            let be = await getBe();
            console.log(be)
        }
        getData();
        ```