前端当接口请求异步的时候可以传个callback函数_如何接收callback() 结果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42180156/article/details/121035083

在Vue的main.js文件中，通过异步接口请求数据，并在其他页面使用返回值。通过传递callback函数实现数据的跨页面交互。在实际应用中，可以添加判断确保数据获取后再进行操作。在小程序的图表渲染场景中，同样利用异步请求后的数据调用渲染方法。

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

有个需求是在vue 文件 main.js里面请求接口返回的值在其他页面上用

import { getOnlinekey } from "./api/common.js";
Vue.prototype.$GetOnlinekey=(callback)=>{
	getOnlinekey().then(res=>{
		let {code,result}=res.data
		console.log(result,"getOnlinekey")
		Vue.prototype.$KEY = {
			PROCESS_ID:result.design_ID, //租赁流程的流程ID
			CUSTOMER_CODE:result.sol_CUSTOMER ,//经销商表的Online表明
			SOL_HELP_CENTER:result.sol_HELP_CENTER						//帮助中心表 表明
		}
	})
	if(callback){
		callback()
	}
	
}
Vue.prototype.$GetOnlinekey()

这里传了个callback ()函数

在其他页面用的时候

	this.$GetOnlinekey(()=>{
					this.$Nav.go('/pages/form/form', {
						'processId': this.$KEY.PROCESS_ID,
						title: '项目申请'
					})
				})

或者加个判断

if(this.$KEY.PROCESS_ID){
this.$Nav.go('/pages/form/form', {
						'processId': this.$KEY.PROCESS_ID,
						title: '项目申请'
					})
}

还有一种情况是小程序的

场景是小程序的图表在请求完接口拿到数据后调用渲染的方法

//获取三天的数据
   getcaculateTime (callback)  {
     var that=this
     wx.request({
      url: prodm+'powerstation/caculateTime',
      method: "get",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data:{
        date: (that.data.nowTime).replace(/\./g, '-')
      },
      success:function (data) {
        console.log("三天的点",data)
        let data_X = data.data.object
        let temp_x = data_X.map(item => ({datetime:item}))
        that.setData({
          tempDataX:temp_x
        })
        callback()
      }
    })
   
  },
   this.getcaculateTime(()=>{   //这些都是画图的方法
      this.getCurrentData()    
      this.getVoltageData()
      this.getdaylypower()
      this.getWeekEnergy()
      this.getInverterTemper()
      this.getExchangeCurren()
      this.getExchangeVoll()
    })