下面将封装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(){ })

微信小程序request请求封装

 var app = getApp();

 function request(url,postData,doSuccess,doFail,doComplete){

    var host = getApp().conf.host;

     wx.request({

       url: host+url,

       data:postData,

       method: 'POST',

       success: function(res){

        if(typeof doSuccess == "function"){

          doSuccess(res);

        }

       },

       fail: function() {

        if(typeof doFail == "function"){

          doFail();

        }

       },

       complete: function(){

        if(typeof doComplete == "function"){

          doComplete();
  
       }
      }    });
 }
}
module.exports.request = request;

微信小程序之封装http请求的更多相关文章

  1. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  2. 微信小程序:封装全局的promise异步调用方法

    微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resol ...

  3. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  4. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  5. 微信小程序网络封装-简单高效

    废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动 ...

  6. 微信小程序开发(request请求后台获取不到data)

    1微信的request的post请求后台获取不到data(当初这个问题纠结了好久好久),原因是post传递的data是json格式而不是key,value的格式,所以获取不到相应的data就是post ...

  7. 微信小程序接口封装、原生接口封装、request、promise封装

    相信大家在做微信小程序的时候会有很多地方需要调用接口,就和pc以及手机端一样,多个页面多次调用会有很多状态,那为了节省大家的开发时间就会需要给请求的接口做一些简单封装,便于开发,在这里我用了两个js, ...

  8. 微信小程序组件封装及调用-原生

    封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会 ...

  9. PHP 之微信小程序支付封装

    <?php /** * Created by PhpStorm. * User: yangs * Date: 2019/4/26 * Time: 14:28 */ class WeixinPay ...

随机推荐

  1. javascript之location详解

    window.location.hash 使用说明 今天给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下. l ...

  2. IM系统的MQ消息中间件选型:Kafka还是RabbitMQ?

    1.前言 在IM这种讲究高并发.高消息吞吐的互联网场景下,MQ消息中间件是个很重要的基础设施,它在IM系统的服务端架构中担当消息中转.消息削峰.消息交换异步化等等角色,当然MQ消息中间件的作用远不止于 ...

  3. Java 虚拟机的垃圾回收

    背景 垃圾收集(Garbage Collection,GC),GC的历史比Java久远,1960年诞生于MIT的Lisp是第一门真正使用内存动态分配和垃圾收集技术的语言. 对于Java来说,运行时区域 ...

  4. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  5. HystrixCommand实战

    1. HystrixCommand实战 1.1. 需求 由于前端公共调用入口接口代码,封装在单独的jar包,它不属于springCloud管理,所以不适合用注解的方式@HystrixCommand进行 ...

  6. 【Windows】Git自动拉取

    原文:https://blog.csdn.net/qq_38375394/article/details/80093003 bat脚本.windows的schtasks,也就是类似于linux的cro ...

  7. ubuntu中minicom安装和使用

    想要对嵌入式开发板进行开发和操作,都需要进行文件传输或者是控制,这时基本都是需要通过串口线或者是网线进行连接的,在Windows下是使用超级终端通过串口对开发板进行操作的,而在Linux下,最后最常见 ...

  8. 机器学习基石笔记:03 Types of Learning

    原文地址:https://www.jianshu.com/p/86b2a9cef742 一.学习的分类 根据输出空间\(Y\):分类(二分类.多分类).回归.结构化(监督学习+输出空间有结构): 根据 ...

  9. react-create-app 构建react项目的流程以及需要注意的地方

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 React 系列文章代码地址 一 目录 不折腾的前端,和咸鱼有什么区别 ...

  10. H5在WebView上开发小结

    背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...