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


Posted in Javascript onJanuary 16, 2017

微信小程序 封装http请求

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

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

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

// 本服务用于封装请求
// 返回的是一个promisepromise

var 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(){

})

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

Javascript 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
简单实现js轮播图效果
Jul 14 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
详解vue-validator(vue验证器)
Jan 16 #Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 #Javascript
webpack入门必知必会
Jan 16 #Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 #Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 #Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 #Javascript
Javascript的this用法
Jan 16 #Javascript
You might like
zend framework文件上传功能实例代码
2013/12/25 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python使用Matlab命令过程解析
2020/06/04 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
员工培训邀请函
2014/02/02 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
幸福来敲门观后感
2015/06/04 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL