微信小程序 封装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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
Javascript Select操作大集合
May 26 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 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
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
js实现随机点名功能
2020/12/23 Javascript
Django发送html邮件的方法
2015/05/26 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python实现双人五子棋(终端版)
2020/12/30 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
《草原的早晨》教学反思
2014/04/08 职场文书
2015年试用期工作总结
2014/12/12 职场文书
先进个人评语大全
2015/01/04 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android