微信小程序 封装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 常用功能总结
Mar 18 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
Vue动态组件实例解析
Aug 20 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
织梦模板标记简介
2007/03/11 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
php压缩文件夹最新版
2018/07/18 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
js+css实现打字效果
2020/06/24 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
详解python while 函数及while和for的区别
2018/09/07 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
个人充满哲理的自我评价
2014/02/20 职场文书
社区矫正工作方案
2014/06/04 职场文书
田径运动会通讯稿
2014/09/13 职场文书
旅游投诉信范文
2015/07/02 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers