微信小程序如何封装wx.request请求封装步骤（基于面对对象）

步骤

1.新建utils文件夹（微信小程序自带），在utils下创建base.js（名字可以由自己来定）。
2.封住代码
.`class Base {
constructor() {
this.baseRequestUrl = “http://123.cn/” //封装服务器接口路径，方便修改
}
reuqest(params) { //将所有request中需要用到的放进params参数中
var url = this.baseRequestUrl + params.url; //构造完整接口路径
if (!params.type) { //判断请求方式如果为空即默认让它为GET请求
params.type = ‘GET’;
}
wx.request({
url: url,
data: params.data,//请求的数据为默认
header: {
‘content-type’: ‘application/json’,
‘token’: wx.getStorageSync(‘token’)
},
method: params.type,
success: function(res) {
params.sCallback && params.sCallback(res) //sCallback为回调函数为了解决异步请求结果
},
fail: function(err) {

  }
})

}
}

export {Base} //抛出Base类`

3.去需要请求数据新建页面
例：
4.在request-model.js文件中`import {
Base
} from ‘…/…/utils/base.js’ //导入封装request的Base类

class Home extends Base { //继承类
constructor() { //创建构造函数以防报红
super();
}
getBannerData(id, callBack) { //id ，callBack为参数作为传递
var params = {
url: ‘banner/’ + id,
sCallback: function(res) { //回调函数接受res结果
callBack && callBack(res.items)
}
}

}
}
export {
Home
};
5.// requestPackage/request/request.js
import {
Home
} from ‘request-model.js’; //导入类
var home = new Home(); //实例化类名
Page({

/**

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

},

/**

• 生命周期函数–监听页面加载
  */
  onLoad: function(options) {
  this._loadData() //页面加载时调用请求数据
  },
  _loadData: function() {
  var id = 1;
  home.getBannerData(id, (res) => { //用home类下的getBannerData请求
  console.log(res);
  //接下来直接数据绑定
  this.setData({
  banner: res
  })
  })
  },

})`

好了完成！