1. 程式人生 > >基於mpvue微信小程式 es6-promise.js封裝請求

基於mpvue微信小程式 es6-promise.js封裝請求

在微信小程式中,實現前後臺互動用到的介面是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:

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

將此處勾選哦~