视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
微信小程序HTTP接口请求封装代码实例
2020-11-27 21:51:09 责编:小采
文档


1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)

request.js:

var app = getApp();
//项目URL相同部分,减轻代码量,同时方便项目迁移
//这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息
var host = 'http://localhost:8081/demo/';
 
/**
 * POST请求,
 * URL:接口
 * postData:参数,json类型
 * doSuccess:成功的回调函数
 * doFail:失败的回调函数
 */
function request(url, postData, doSuccess, doFail) {
 wx.request({
 //项目的真正接口,通过字符串拼接方式实现
 url: host + url,
 header: {
 "content-type": "application/json;charset=UTF-8"
 },
 data: postData,
 method: 'POST',
 success: function (res) {
 //参数值为res.data,直接将返回的数据传入
 doSuccess(res.data);
 },
 fail: function () {
 doFail();
 },
 })
}
 
//GET请求,不需传参,直接URL调用,
function getData(url, doSuccess, doFail) {
 wx.request({
 url: host + url,
 header: {
 "content-type": "application/json;charset=UTF-8"
 },
 method: 'GET',
 success: function (res) {
 doSuccess(res.data);
 },
 fail: function () {
 doFail();
 },
 })
}
/**
 * module.exports用来导出代码
 * js文件中通过var call = require("../util/request.js") 加载
 * 在引入引入文件的时候" "里面的内容通过../../../这种类型,小程序的编译器会自动提示,因为你可能
 * 项目目录不止一级,不同的js文件对应的工具类的位置不一样
 */
module.exports.request = request;
module.exports.getData = getData;

2.page里面随便一个创建一个文件夹,创建四种文件,在js里面加入 

//引入代码
var call = require("../util/request.js")
 
Page({
 data: {
 pictureList: [],
 },
 
 onLoad: function () {
 var that = this;
 //调用封装的方法,为了方便我直接在页面加载的时候执行这个方法
 call.getData('lunbo.do', this.shuffleSuc, this.fail);
 // 无用,前面忘记注释,抱歉
 // this.loadMsgData(that);
 },
 shuffleSuc: function (data) {
 var that = this;
 that.setData({
 pictureList: data.rows
 })
 //我后面测试了一下,直接this.setData也可以,但是因为我在没有使用封装方法的时候
 //this.setData报过错,不能直接用this,所以我在赋值的时候一般都会加上var that = this;
 //这句话算是一个不是习惯的习惯
 },
 fail: function () {
 console.log("失败")
 },
})

将回调函数写在page里面,在调用封装方法的时候通过this.方法名调用,这样就能确保that.setData方法有效,如果是写在外面的function方法小程序编译器不会报错,但是在wxml中bindtap无效,我也没深究,同时在call.getData方法中调用的时候虽然能够进入该方法,但是赋值是无效的,所以我不建议用这种方式:

function shuffleSuc(data) {
 var that = this;
 that.setData({
 pictureList: data.rows
 })
}

3. 运行之后通过小程序的控制台AppData可以打印data里面的值,同时也可以根据需要在页面中显示

下载本文
显示全文
专题