微信小程序的异步以及回调函数
这是index.js主方法:
import { Home } from 'home-model.js';
var home=new Home();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this._onloadData();
},
_onloadData:function(){
var id=1;
var data = home.getBannerData(id);
},
})
这是model层的home-model.js方法:
class Home{
constructor(){
}
getBannerData(id){
wx.request({
url: 'http://www.csn.com/tp5/public/index.php/api/v1/banner',
method:'GET',
data:{
id:id
},
success:function(res){
console.log(res)
}
})
}
}
export{Home};
此时我们执行文件,会在home-model.js下输出结果
但是我们是想要结果输出在index.js中的,所以我们需要使用回调函数
import { Home } from 'home-model.js';
var home=new Home();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this._onloadData();
},
_onloadData:function(){
var id=1;
var data = home.getBannerData(id,this.callback);
},
callback:function(res){
console.log(res.data)
},
})
我们定义了callback回调方法,将回调方法作为参数输入getBannerData中,在getBannerData调用callback方法:
class Home{
constructor(){
}
getBannerData(id,callback){
wx.request({
url: 'http://www.csn.com/tp5/public/index.php/api/v1/banner',
method:'GET',
data:{
id:id
},
success:function(res){
callback(res)
}
})
}
}
export{Home};
所以在home-model.js重新将res的结果传入callback方法中,callback在index.js中输出
此外如果回调简单,那么我们可以使用匿名函数:
import { Home } from 'home-model.js';
var home=new Home();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this._onloadData();
},
_onloadData:function(){
var id=1;
var data = home.getBannerData(id,res=>{
console.log(res)
});
},
})
显而易见,匿名函数的方式写非常简洁。
但是如果回调函数的业务复杂,还是建议定义回调函数,因为我们要实现模块的分离。