微信提供了api，開(kāi)發(fā)者可以通過(guò)wx.request來(lái)獲取服務(wù)器的數(shù)據(jù)和傳遞數(shù)據(jù)。雖然api提供了很大的方便，但是調(diào)用多個(gè)接口時(shí)，代碼重復(fù)性太高，我們可以進(jìn)一步封裝。

新建文件request.js，將請(qǐng)求的封裝方法寫在里面

//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),
}

• 當(dāng)發(fā)起請(qǐng)求的時(shí)候，界面出現(xiàn)“加載中...”的Loading界面，請(qǐng)求完成后，取消加載loading。設(shè)置加載loading的mask屬性為true，可以顯示透明蒙層，防止觸摸穿透。

• 有遮罩還不夠，某些情況下可能會(huì)發(fā)生多次請(qǐng)求（用戶迅速的點(diǎn)擊兩次請(qǐng)求按鈕，在遮罩層未出來(lái)之前）。比如在點(diǎn)擊支付的時(shí)候，由于調(diào)用支付前的誤操作，支付完成后再次彈出一個(gè)支付框，會(huì)給用戶帶來(lái)非常不好的體驗(yàn)。
  可以在封裝方法中加一個(gè)hasClick的“鎖”，在開(kāi)始請(qǐng)求前檢查是否已經(jīng)發(fā)起過(guò)請(qǐng)求，如果沒(méi)有才發(fā)起這次請(qǐng)求，等到請(qǐng)求返回之后再把鎖的狀態(tài)恢復(fù)回去。

頁(yè)面調(diào)用，在頁(yè)面的js文件中引用

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

request(){
  let data = {
    params1:params1, //參數(shù)1
    params2:params2, //參數(shù)2
  }
    request._get('http://192.168.1.30:8085/banner', data , res => {
      console.log(res)
    },err => {
      console.log(err)
    })
},

• 如果沒(méi)有請(qǐng)求參數(shù)，把data換成null就好

小程序默認(rèn)請(qǐng)求超時(shí)時(shí)間是60秒，等待時(shí)間有點(diǎn)長(zhǎng)，我們可以在app.json中進(jìn)行設(shè)置

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

每個(gè)頁(yè)面請(qǐng)求的時(shí)候都要引用封裝，還是有點(diǎn)麻煩。注意到小程序頁(yè)面都可以獲取app.js的實(shí)例（const app = getApp()），所以可以改一下封裝，將封裝方法直接暴露出去，在app.js中再配置POST/GET等請(qǐng)求；請(qǐng)求的url也可以抽出來(lái)寫在一起，方便查找和修改。自己試一下吧~

//覺(jué)得有用的話，點(diǎn)個(gè)喜歡再走嘛（不要臉.jpg）