欢迎光临
我们一直在努力

微信小程序封装wx.request实现http请求(包含同步版)

本篇文章记录微信小程序如何对wx.request进行封装实现http请求,如何实现同步请求

小程序的开发文档提供了相对实用的api wx.request() 但是我们把他封装一下,做成一个符合自己使用习惯的方式。

先上我封装好的代码吧

function myrequest(url, method,param, successCallback, failCallback) {
   console.log('准备发起请求 :>> ', url);
   var _this = this;
   wx.request({
       url: url,
       data: param,
       dataType: 'json',
       method: method,
       header: {
           'custom-header': method,
           'content-type': 'application/json'
       },
       success: (res) => {
           if (successCallback) {
               successCallback(res);
           }
       },
       fail: (res) => {
           console.log(res)
           if (failCallback) {
               failCallback(res);
           }
       }
   });
}

export default {
   get:function(url, param, success, fail) {
       return myrequest(url,"GET",param,success,fail)
    },

   getSync:function(url, param){
       return new Promise((resolve,reject)=>{
           return myrequest(url,"GET",param,resolve,reject)
       })
    },

   post:function(url, param, success, fail){
       return myrequest(url,"POST",param,success,fail)
    },

   postSync:function(url, param, success, fail){
       return new Promise((resolve,reject)=>{
           return myrequest(url,"POST",param,resolve,reject)
       })
    },

   put:function(url, param, success, fail){
       return myrequest(url,"PUT",param,success,fail)
    },

   putSync:function(url, param, success, fail){
       return new Promise((resolve,reject)=>{
           return myrequest(url,"PUT",param,resolve,reject)
       })
    },

   delete:function(url, param, success, fail){
       return myrequest(url,"DELETE",param,success,fail)
    },

   deleteSync:function(url, param, success, fail){
       return new Promise((resolve,reject)=>{
           return myrequest(url,"DELETE",param,resolve,reject)
       })
   }
}

方法说明:

支持get、post、delete、put

同步方法:getSync、postSync、deleteSync、putSync

如何引用

我是把引用放在app.js里了  ,省去了每个页面引用都弄半天路径的问题

//app.js文件顶部加上此代码.   我的目录结构是app.js 与utils文件夹是同一目录 
import ajax from '/utils/ajax.js';

//其它代码
.......
.......
globalData: { userInfo: null },
//我在globalData 加了一个属性 http: ajax

使用页面调用方式,page顶部加上如下代码 

var app = getApp();
 

 

然后就可以再想用的地方用了

var param={
           name:"这是名字",
           id:123123
        }

       app.http.get(
           "http://192.168.0.109:8003/api/user/sdfs",
           param,
            res=>{
console.log('成功了 :>> ', res);
           },
           er=>{
               console.log('失败了 :>> ', er);
            })
同步请求的方法
        app.http.getSync("http://192.168.0.109:8003/api/user/ceshi",null)
       .then((a,b)=>{
           console.log('object :>> ', a,b);
           console.log('结束了 :>> ');
           console.log('发起下一次请求 ');
           return app.http.getSync("http://192.168.0.109:8003/api/user/ceshi",null)
       }).then(a=>{
//第二次请求的结果
           console.log("a",a)
           console.log('结束了 :>> ');
        })

 

 

赞(0)
未经允许不得转载:自游互动 » 微信小程序封装wx.request实现http请求(包含同步版)
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们