回调函数在小程序中的实际应用

需求分析

1.小程序主页/index/index.js初加载时需要从服务器请求数据

2.请求功能封装在utils/util.js里面，在主页的onLoad里面调用

问题

1.由于在util.js中的请求是异步方式，返回时间不确定，导致onLoad的时候取不到值

// miniprogram/pages/index/index.js
import {getDbFail} from '../utils/util';
Page({
  data: {
        myData:''
  },
    //定义回调函数
    //回调函数作为参数传到util.js的getDbFail中
    //等到请求成功的时候运行该回调函数
    
    ///这里的回调函数相当于一个承诺被传递过去，随着时间的推移，承诺一定会兑现（得到请求的数据：res）
    callback(res){
        this.setData({
            myData:res
        })
    },
  onLoad: function () {
        let that=this;
        getDbFail(this.callback)
        });
  },
})


// miniprogram/pages/utils/util.js
function getDbFail(callback){
    
    let url="http://rest.apizza.net/mock/xxx/xxx";
    wx.request({
        url:url,
        success(res){
            //...
            //...
            //5s左右的等待时间
            callback(res);
        }
    })
}
module.exports = {
    getDbFail:getDbFail
}

 

转载于:https://www.cnblogs.com/remly/p/10902478.html