微信小程序 封装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 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
详解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
PHP也可以?成Shell Script
2006/10/09 PHP
关于页面优化和伪静态
2009/10/11 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php短信接口代码
2016/05/13 PHP
php集成动态口令认证
2016/07/21 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
详解Swift中属性的声明与作用
2016/06/30 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python devel安装失败问题解决方案
2020/06/09 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
党员干部形式主义个人整改措施
2014/09/17 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
博物馆观后感
2015/06/05 职场文书
公司出差管理制度范本
2015/08/05 职场文书