首页 > 编程 > JavaScript > 正文

微信小程序 封装http请求实例详解

2019-11-19 17:55:09
字体:
来源:转载
供稿:网友

微信小程序 封装http请求

最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112

下面将封装http请求服务部分的服务以及引用部分

// 本服务用于封装请求// 返回的是一个promisepromisevar sendRrquest = function (url, method, data, header) {  var promise = new Promise(function (resolve, reject) {    wx.request({      url: url,       data: data,      method: method,      header: header,      success: resolve,      fail: reject    })  });  return promise;};module.exports.sendRrquest = sendRrquest 

在utils文件中创建文件requestService.js文件

下边是在page.js文件中引用部分代码

// 界面一般通过使用Page函数注册一个界面,接收一个Object对象,该对象指定了初始化数据/生命周期函数函数/事件处理函数// data 存放页面初始化数据数据,类似angular的的$scope// onLoad 生命周期函数 监听页面加载// onReady 生命周期函数 监听页面首次渲染完成完成// onShow 生命周期函数 监听界面显示// onHide 生命周期函数 监听界面隐藏// onUnload 生命周期函数 监听页面卸载// onPullDownRefresh 页面相关事件 监听用户下拉事件// onReachBottom 页面上拉到达底部触发的事件// onShareAppmessage 点击左上方分享事件var testService = require('../../utils/testService.js')var request = require('../../utils/requestService.js')Page({  data:{    test:'123',    positionlist:[]  },  onLoad:function(){  },  onReady: function () {    var that = this;    testService.test('a');    testService.agerntest('a');    var url = 'https://webapi.tianjihr.com/position/searcher?sort=-refresh_time&offset=10&limit=10';    request.sendRrquest(url, 'GET', {}, {})      .then(function (response) {        that.setData({          positionlist:response.data.list        });        console.log(response);      }, function (error) {        console.log(error);      });  },  onPullDownRefresh: function () {      },  onShareAppMessage: function () {    // 微信分享需要的配置参数    return {      title: '自定义分享标题',      desc: '自定义分享描述',      path: '/page/user?id=123'    }    // console.log(1);  }});

上边的代码和js代码有不同的代码需要注意

1.异步处理方式改变

原有方式是:

var promise = new Promise();promise.resolve('成功');promise.reject('失败');return promise;

现有的方式:

return new Promise(function (resolve, reject) {  resolve('成功');  reject('失败');})

2.在promise成功或者失败的回调中不能直接赋值,如:

var that = this;test().then(function(){  that.data.test='';},function(){})

需要使用如下方式:

var that = this;test().then(function(){  that.setDatat={    test:123  };},function(){})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表