微信小程序 wx.request请求封装,超级简单

来自:互联网
时间:2019-08-24
阅读:
免费资源网 - https://freexyz.cn/

微信提供了api,开发者可以通过wx.request来获取服务器的数据和传递数据。虽然api提供了很大的方便,但是调用多个接口时,代码重复性太高,我们可以进一步封装。

将官方文档中wx.request的参数贴上,方便阅读

【微信小程序】wx.request请求封装,超级简单

新建文件request.js,将请求的封装方法写在里面

//var hasClick = false;

const http = (method, url, data, response, error) => {
  if (hasClick) {
    return
  }
 // hasClick = true

  wx.showLoading({
    title: '加载中...',
    mask: true 
  })
  
  wx.request({
    method: method,
    url: url,
    header: { 
      'content-type': 'application/json'
      // 'token': wx.getStorageSync("token")
     },
    data:data,
    success: res => {
      return response(res)
    },
    fAIl: err => {
      return error(err)
    },
    complete: info => {
      wx.hideLoading();
     // hasClick = false
    }
  })
}

module.exports = {
  _get: (url, data, response, error) => http('GET', url, data, response, error),
  _post: (url, data, response, error) => http('POST', url, data, response, error),
   _put: (url, data, response, error) => http('PUT', url, data, response, error),
  _delete: (url, data, response, error) => http('DELETE', url, data, response, error),
}
  • 当发起请求的时候,界面出现“加载中...”的Loading界面,请求完成后,取消加载loading。设置加载loading的mask属性为true,可以显示透明蒙层,防止触摸穿透。

  • 有遮罩还不够,某些情况下可能会发生多次请求(用户迅速的点击两次请求按钮,在遮罩层未出来之前)。比如在点击支付的时候,由于调用支付前的误操作,支付完成后再次弹出一个支付框,会给用户带来非常不好的体验。
    可以在封装方法中加一个hasClick的“锁”,在开始请求前检查是否已经发起过请求,如果没有才发起这次请求,等到请求返回之后再把锁的状态恢复回去。

页面调用,在页面的js文件中引用

import request from '../../request/request.js'

request(){
  let data = {
    params1:params1, //参数1
    params2:params2, //参数2
  }
    request._get('http://192.168.1.30:8085/banner', data , res => {
      console.log(res)
    },err => {
      console.log(err)
    })
},
  • 如果没有请求参数,把data换成null就好

小程序默认请求超时时间是60秒,等待时间有点长,我们可以在app.json中进行设置

{
//...
"networkTimeout": {
    "request": 5000
  }
}

每个页面请求的时候都要引用封装,还是有点麻烦。注意到小程序页面都可以获取app.js的实例(const app = getApp()),所以可以改一下封装,将封装方法直接暴露出去,在app.js中再配置POST/GET等请求;请求的url也可以抽出来写在一起,方便查找和修改。自己试一下吧~

免费资源网 - https://freexyz.cn/
返回顶部
顶部