微信小程序的异步以及回调函数

微信小程序的异步以及回调函数

这是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)
    });
  },

})

显而易见，匿名函数的方式写非常简洁。

但是如果回调函数的业务复杂，还是建议定义回调函数，因为我们要实现模块的分离。