微信小程序 封装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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
javascript的setTimeout()使用方法总结
Nov 20 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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制作静态网站的模板框架
2006/10/09 PHP
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
tensorflow常用函数API介绍
2020/04/19 Python
python输出数学符号实例
2020/05/11 Python
Python验证码截取识别代码实例
2020/05/16 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
Python是如何进行类型转换的
2013/06/09 面试题
应届生人事助理求职信
2013/11/09 职场文书
ktv好的活动方案
2014/08/17 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
搞笑老公保证书
2015/02/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
居委会工作总结2015
2015/05/18 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书