小程序之接收异步方法的返回结果

用代码演示

class Home{
constructor(){

}
getBannerData(id){
wx.request({
url: 'http://z.cn/index.php/api/v1/banner/'+id,
method:'GET',
success:function(res){
console.log(res);
return res;
}
})
}
}

export {Home};

以上代码中console.log出来的是正常的返回结果

// pages/home/home.js

import {Home} from 'home-model.js';
var home = new Home();
Page({

/**
* 页面的初始数据
*/
data: {

},

onLoad:function(){
this._loadData();
},
// _ 下划线来标识他是一个私有的方法
_loadData:function(){
var id = 1;
var data = home.getBannerData(id);
    console.log(data);
},

})

接收到的结果却是undefined，是因为所有的request均为异步请求，不会阻塞程序运行，用户体验更好

接收异步方法的返回结果的解决办法就是采用回调函数的方法

class Home{
constructor(){

}
getBannerData(id,callback){
wx.request({
url: 'http://z.cn/index.php/api/v1/banner/'+id,
method:'GET',
success:function(res){
//console.log(res);
// return res;
callback(res);
}
})
}
}

export {Home};

// pages/home/home.js

import {Home} from 'home-model.js';
var home = new Home();
Page({

/**
* 页面的初始数据
*/
data: {

},

onLoad:function(){
this._loadData();
},
// _ 下划线来标识他是一个私有的方法
_loadData:function(){
var id = 1;
var data = home.getBannerData(id,this.callBack);
// console.log(data);
},
//回调函数
callBack:function(res){
console.log(res);
},
})