新建檔案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),
}
 

• 當發起請求的時候，介面出現“載入中...”的Loading介面，請求完成後，取消載入loading。設定載入loading的mask屬性為true，可以顯示透明蒙層，防止觸控穿透。

頁面呼叫，在頁面的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也可以抽出來寫在一起，方便查詢和修改。自己試一下吧~