微信小程序 封装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 相关文章推荐
非常好的js代码
Jun 27 Javascript
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
微信小程序实现单选功能
Oct 30 Javascript
validform表单验证的实现方法
Mar 08 Javascript
JavaScript实现左右滚动电影画布
Feb 06 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
javascript实现留言板功能
2020/02/08 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
思想汇报格式
2014/01/05 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
考试作弊检讨书
2014/10/21 职场文书
英文邀请函
2015/02/02 职场文书
红与黑读书笔记
2015/06/29 职场文书