异步接口同步返回以及解决回调地域问题

最新推荐文章于 2024-07-25 15:03:14 发布

原创最新推荐文章于 2024-07-25 15:03:14 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端 #vue.js

前端学习记录专栏收录该内容

5 篇文章

订阅专栏

本文探讨了前端开发中常见的异步回调问题，即回调地狱，并提出了解决方案。通过将回调函数封装为函数以减少重复，以及利用ES6的Promise和ES7的async/await来优化异步代码的结构。特别是当异步函数间存在依赖时，Promise的then和catch方法能有效地管理回调顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果我们遇到一个回调函数必须依赖另一个回调函数执行调用，那么这个函数是异步执行的。最典型的是在前端开发中的ajax请求，服务器的响应返回的过程就是异步的，如果有许多功能需要连续调用的时候，代码就要层层嵌套，这就会形成回调地狱。
如何解决回调地狱，以下有两种解决方法
一、将回调里面的的功能封装为函数，减少代码重复率（缺少通用性）
二、使用ES6中的promise

const preA = new Promise(resolve => {
    let params = {
        type: "list",
        ids: idArray.slice(0,90).join(",")
    }
    API.fetchSpecialMomentList(params, (code, data) =>{
         resolve(data);
    })
});
// 获取行情的当前价接口
const preB = new Promise(resolve => {
    let params = {
        type: "list",
        ids: idArray.slice(90,180).join(",")
    }
    API.fetchSpecialMomentList(params, (code, data) =>{
         resolve(data);
    })
});
Promise.all([preA, preB]).then(([dataA, dataB]) => {
// A接口和B接口信息都返回后，进行下面的功能
    let scrollParams = {
        dataList: this.newMomentList.concat(dataA.concat(dataB)),
        scrollType: 'refresh'
    }
    this.$refs.scroller.getData(scrollParams)
    this.allMomentList = this.newMomentList.concat(dataA.concat(dataB))

    this.loadingActive = false
})

三、使用ES7中的async/await解决

 function after2seconds() {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve('2秒后返回值')
          }, 2000);
      } )
  }
  function after3seconds() {
      return new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve('3秒后返回值')
          }, 3000);
      } )
  }
  async function awaitTest() {
      let result = await after2seconds()
      let result2 = await after3seconds()
      console.log('异步变同步', result, result2);
  }
  awaitTest()

Promise相关的两个方法只能在异步函数之间没有相互依赖关系时使用，若异步函数之间有依赖关系，可以使用promise的then和catch

var promise1 = new Promise((resolve, reject) => {
     setTimeout(() => {
    	console.log("A先走")
        resolve('A完成')
     }, 2000);
})
var promise2 = promise1.then(function(data){
	console.log("A完成", data)
})
return promise2