异步提交mvc返回数据php,微信小程序之MVC框架方式书写及以同步方式处理异步数据结果...

作为一名php开发人员，在开发过程中通常都是使用PHP的MVC框架进行开发的，早已习惯这个开发模式，所以本次已MVC的方式进行微信小程序的搭建，方便开发，在书写js文件过程中使用ES6语法，可以按照php类的方式进行处理

1、在小程序根目录下创建pages和utils文件夹，pages就不多说，utils文件夹放我们所要封装的微信请求类base.jsimport {Config} from '../utils/config.js';

class Base

{

constructor(){

this.baseRequestUrl = Config.restUrl;

}

request(params){

var url = this.baseRequestUrl + params.url;

if (!params.type){

params.type = 'GET';

}

wx.request({

url: url,

data: params.data,

header: {

'content-type':'application/json',

'token':wx.getStorageInfoSync('token')

},

method: params.type,

//以回调函数的方式来接收处理异步结果

success: function (res) {

params.sCallback && params.sCallback(res.data);

},

fail: function (error) {

console.log(error);

}

})

}

getDataSet(event,key){

return event.currentTarget.dataset[key];

}

}

//暴露出Base类作为一个接口供外部使用

export {Base};

2、在一个页面文件中，比如说home-model.js页面(pages/home/home-model.js)，在home-model.js中(相当于MVC中的M)，来进行主要的数据处理，此处也是按照回调函数的方式来传递和接收异步的数据import {Base} from '../../utils/base.js';

class Home extends Base

{

constructor(){

super();

}

getBannerData(id,callback){

var params = {

url:'banner/'+id,

sCallback:function(res){

callback && callback(res.items);

}

};

this.request(params);

}

}

3、在home.js中(相当于MVC中的C)引入数据处理类Home，并调用响应的方法import {Home} from 'home-model.js';

var home = new Home();

Page({

data: {

},

onLoad: function () {

this._loadData();

},

_loadData:function(){

var id = 1;

//获取banner

//此处的回调函数按照ES6语法书写，如果此处的业务处理比较繁琐

//可以单独定义回调函数进行调用

home.getBannerData(id,(res)=>{

this.setData({

'bannerArr':res

});

});

}

})

4、接下来就是进行视图的渲染了home.wxml主要是调用各个组件进行视图渲染

注意：因为在base.js中请求返回的结果是异步的，我们就不能想当然的按照同步的方式来接收数据(这样是接收不到任何数据的)，所以此处的解决方案就是使用传递回调函数的方式来传递base.js中异步结果，以便在各个文件的可以获取的到；在回调函数传递的过程中可以分为请求和数据的返回两个过程

请求过程：home.js--->home-model.js--->base.js

数据返回：base.js---->home-model.js--->home.js