在微信小程式中，實現前後臺互動用到的介面是wx.request()

在開發的過程中，每個涉及到互動的檔案都要使用wx.request()顯得很繁瑣，而且統一處理起來不方便，比如要改請求頭的話就需要每個檔案去改

所以我就嘗試對wx.request()進行封裝，統一管理起來

首先放出我的目錄結構：

封裝請求的主要檔案是 util.js 和 api.js

util.js：存放工具類

api.js：存放介面

第一步：

在微信小程式中引入es6-promise

如果是基於mpvue框架進行微信小程式開發，只需要npm install es6-promise

原生開發則進入es6-promise.js檔案

第二步：

新建檔案（util.js）存放promise處理

const Promise = require('es6-promise').Promise

function httpsPromisify (fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        resolve(res.data)
      }
      obj.fail = function (res) {
        reject(res)
      }
      fn(obj)
    })
  }
}

module.exports = {httpsPromisify: httpsPromisify}
 

新建檔案（api.js）存放對介面的處理

import util from '$g/util' // 此處，引入存放對promise處理的檔案

const ip = 'http://xxx.xx.xx.xxx:xxxx'  // 後臺的ip地址
const getRequest = util.httpsPromisify(wx.request)

const request = (method, url, data = {}) => { // method為請求方法，url為介面路徑，data為傳參
  return getRequest({
    url: ip + url,
    data: data,
    method: method,
    header: {
      'content-type': 'application/json'
    }
  })
}

export default {
  // 介面
  [自定義名字]: params => request([請求方法], [介面路徑], params),
  // 例子
  loadMenu: params => request('post', '/menu/loadMainMenu.do', params)
   }
 

第三步：

在main.js中，將api.js設定為全域性

import api from '$g/api' // 引用介面處理檔案，此處為api.js
Vue.prototype.$api = api

第四步：

最後一步

在需要進行前後端互動的檔案中，定義方法

async [方法名] (params) {
        const result = await this.$api.loadMenu(params) // result即為後臺返回的資料，params為傳入的引數，loadMenu為api.js中自定義的方法名
}

小tip：

如果遇到跨域問題，需要在微信小程式開發工具中進行設定

將此處勾選哦~