小程序网络请求的封装（一）:引入model分页面思想
文件夹目录：
一、http基类http.js
import { config } from '../config.js'
class HTTP {
request(params) {
// url, data, method,
if (!params.method) {
params.method = "POST"
}
wx.request({
url: config.api_base_url + params.url,
method: params.method,
data: params.data,
header: {
"Content-Type": "application/x-www-form-urlencoded;text/html; charset=utf-8"
},
success: (res) => {
let code = res.data.result
if (code == "0000") {
params.success && params.success(res.data)
}
else {
this._show_error(res.data.msg)
}
},
fail: (err) => {
this._show_error("无法访问服务器");
}
})
}
_show_error(msg) {
wx.showToast({
title: msg,
icon: 'none',
duration: 2000
})
}
}
export { HTTP }
二、配置类config.js
const config = {
api_base_url: 'https://www.xxxxx.com/server/',
}
export {config }
三、具体网络请求类test.js
import {
HTTP
} from '../util/http.js'
class TestModel extends HTTP {
getTest(code, providerId, providerKey, sCallback) {
this.request({
url: 'getXXX.htm',
// method: 'POST',
data: {
code: code,
providerId: providerId,
providerKey: providerKey
},
success: (res) => {
sCallback(res)
}
})
}
}
export {
TestModel
}
四、page页面调用
import {
TestModel
} from '../../models/test.js'
const testModel = new TestModel()
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
testModel.getTest("param1", "param2", "param3", (res) => {
console.log("datat==",res);
})
},
model分页面思想：
例如我们有一个页面test，这时我们会新建一个对应这个页面的model，把test这个页面所有的网络请求都写在这个model里，如果页面要用到网络请求的话，就先import这个model，再new一个这个model的对象const testModel = new TestModel()，最后就可以用 testModel.getTest()的形式，调用网络请求了。
这样的model分页面思想，在我们代码维护的时候更方便，例如我们想找某个页面的所有网络请求，就可以一目了然，便于查找，也把业务逻辑都分到了model里面，让页面看起来更简洁，便于代码维护。
