微信小程序之封装http请求

下面将封装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请求封装

 1 var app = getApp();
 3
 4 function request(url,postData,doSuccess,doFail,doComplete){
 5
 6    var host = getApp().conf.host;
 8
 9     wx.request({
10
11       url: host+url,
13
14       data:postData,
15
16       method: ‘POST‘,
17
18       success: function(res){
19
20        if(typeof doSuccess == "function"){
22
23          doSuccess(res);
24
25        }
26
27       },
28
29       fail: function() {
31
32        if(typeof doFail == "function"){
34
35          doFail();
36
37        }
38
39       },
40
41       complete: function(){
43
44        if(typeof doComplete == "function"){
46
47          doComplete();
48   
49        }
51       }
52
53    });
55  }
57 }60
61 module.exports.request = request;

原文地址:https://www.cnblogs.com/zmdComeOn/p/9708556.html

时间: 2024-08-30 14:15:05

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

微信小程序,封装同步请求

封装统一请求的目的:在请求时有时会返回不同的返回码进行不同的数据处理,比如:返回正常时,进行正常操作,如果返回了异常,那么就需要进行不同的处理了,由于每次请求都可能出现各种返回码,所以进行请求封装,进行统一异常处理. 在小程序中提供的请求: wx.request({ url: url, data: params, method: 'POST', header: {                'content-type': 'application/x-www-form-urlencoded'

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

1微信的request的post请求后台获取不到data(当初这个问题纠结了好久好久),原因是post传递的data是json格式而不是key,value的格式,所以获取不到相应的data就是post请求应为表单模式的data,微信小程序提供的datajson格式完全获取不到. 解决方法: 1.改变header header: {'Content-Type': 'application/json;charset=UTF-8;'}, 2.query的格式传递post请求就可以了,不过这个有点..你

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

废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动端程序猿感觉甚是友好,加上有点前端基础就更是觉得入手很easy啦. 微信小程序的网络请求很便捷,直接调用就可以了.但最好还是根据需求,处理一些参数回调信息,进行二次封装,为整个小程序应用直接提供调方法接口岂不是更好? 利用网络请求的一贯思维,分三个回调:onStart:开始请求, onSuccess

微信小程序设置了合法请求域名,小程序一直提示不在合法域名列别中

hotapp 有免费的https proxy ,可以免费代理请求任何http或者https服务,只要设置好合法域名为https://wxapi.hotapp.cn , 就可以请求网址如请求小程序联盟的例子为点击下面链接,可以查看效果https://wxapi.hotapp.cn/proxy/?appkey=hotapp11377340&url=http://www.wxapp-union.com/ 这个https proxy 有什么用(1)如果开发期间公司的业务还未支持https,可以先用这个请

微信小程序 wx.request POST请求------中文乱码问题

问题: 一个简单的表单,提交后台返回数据"提交成功". 以为没问题了,但是没过多久后台小哥就问为啥那么多乱码,找了很久原因,发现在提交的时候就已经乱码了. 嗯,前端问题,然后测试GET/POST方法.GET没有乱码,POST乱码 header这样写的    header: { 'content-type': 'application/x-www-form-urlencoded' } 原因: 如果设置content-type: application/x-www-form-urlenco

微信小程序的wx.request请求方法,标准写法

wx.request({ url: 'https://127.0.0.1:8443/user/testRSA',//请求路径 data:{ column: output //请求数据 }, header:{ 'content-type':"application/json", //请求头 }, method:"POST", //请求方法 dataType:"json",//请求类型 success(data){ //请求成功的参数 console

微信小程序 云开发 数据库 请求数据

js: data:{ listDatas:null//请求的数据存在这个数组里面 } onLoad: function (options) { const db = wx.cloud.database(); db.collection('otheritems').get().then(res => {//otheritems是数据库里面集合的名称 console.log(res); //如果更新数据成功则输出成功信息 var that = this; that.setData({ listDat

微信小程序class封装http

config.js var config = { base_api_url:"https://douban.uieee.com/v2/" } export {config} utils/http.js import {config} from "../config"; class HTTP{ request(params) { if (!params.method) { params.method = "GET" } wx.request({ u

微信小程序 POST请求

微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求,POST请求的时候有好几个坑.我已经为大家填好了. <img src="http://img.blog.csdn.net/20161017170933243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" align