微信小程序wx.request封装

实现功能:
1.实现对wx.request()的封装
2.使用封装后的wx.request()自动添加用户的openid和unionid

主要使用技术:promise

功能简述:
我们在使用微信小程序时为了区分用户通常会在请求头中填加用户的openid或unionid,通常做法是在app.js的onLaunch中写入获取openid的函数体。但是这样做有一个问题就是app.js中的onLaunch和页面的onload并没有严格的执行顺序。这就会造成又是发送请求时openid还未获取到。并且为了减少代码重复我想到的是封装wx.request().

话不多说贴代码

	//此函数实现的是获取openid
  openid(){
    wx.showLoading({
      title: '加载中',
    })
    return new Promise((resolve, reject)=>{
      let that=this
      wx.login({
        timeout: 3000,
        success(res){
          if(res.code){
            wx.request({
              url: ‘填写你的获取openid的url’,
              method:"GET",
              success(res){
                resolve(res)
              },
              fail:function(e){
                reject(e)
              }
            })
          }
        }
      })
    })
  },
  //此函数实现的使用wx.request()发送请求
  after_request(params){
    return new Promise((resolve, reject)=>{
      wx.request({
        url: params.url,
        method:params.method||'GET',
        data:params.data||{},
        header:params.header,
        success(res){
          wx.hideLoading()
          resolve(res)
        },
        fail:function(e){
          reject(e)
        }
      })
    })
  },
//此函数实现的是在发送网络请求前,查看本地是否含有openid和unionid,若存在则添加在请求头中,若不存在去执行openid()函数获取到openid后再去发送网络请求
  request(params){
    var that = this
    if(params.method){
      params.method = params.method.toUpperCase()
    }
    if(that.globalData.openid!=''&&that.globalData.unionid!=''){
      if(params.header){
        params.header.openid = that.globalData.openid
        params.header.unionid = that.globalData.unionid
      }else{
        params.header = {}
        params.header.openid = that.globalData.openid
        params.header.unionid = that.globalData.unionid
      }
      var request = that.after_request(params)
    }else{
      var request = that.openid().then(res=>{
        if(params.header){
          params.header.openid = this.globalData.openid
          params.header.unionid = this.globalData.unionid
        }else{
          params.header = {}
          params.header.openid = this.globalData.openid
          params.header.unionid = this.globalData.unionid
        }
        return that.after_request(params)
      })
    }
    return request
  }
})

其中openid()函数可以直接在onLaunch调用,然后执行一系列保存在本地的操作。

下面我们说如何使用封装后的wx.request()

在其他页面我们首先引入app.js

const app = getApp()
//具体使用,我将在getData()函数中调用
getData(){
	app.request({'url':你的api地址,'method':'GET'/'POST','data':你想发送的数据,可以不带此参数,'hedear':一些其余自定义请求头,默认openid和unionid}).then(res=>{
		console.log(res)
		//你想执行的操作
	})
}
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zipen Chen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值