Solicitud de paquete basada en mpvue WeChat applet es6-promise.js

En el applet de WeChat, la interfaz utilizada para realizar la interacción entre el anverso y el reverso es wx.request()

En el proceso de desarrollo, es engorroso usar wx.request() para cada archivo involucrado en la interacción, y es inconveniente tratarlo de manera uniforme. Por ejemplo, si desea cambiar el encabezado de la solicitud, debe cambiar cada archivo.

Entonces trato de encapsular wx.request() y administrarlo de manera unificada

Primero libere mi estructura de directorios:

Los archivos principales que encapsulan las solicitudes son util.js y api.js

util.js: clase de herramienta de almacenamiento

api.js: interfaz de almacenamiento

primer paso:

Introducir es6-promise en el applet de WeChat

Si está desarrollando applets de WeChat basados ​​en el marco mpvue, solo necesita npm install es6-promise

El desarrollo nativo ingresa al archivo es6-promise.js

Segundo paso:

Cree un nuevo archivo (util.js) para almacenar el procesamiento de promesas

 

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}

Cree un nuevo archivo (api.js) para almacenar el procesamiento de la interfaz

 

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

tercer paso:

En main.js, haz que api.js sea global

import api from '$g/api' // 引用接口处理文件，此处为api.js
Vue.prototype.$api = api

el cuarto paso:

último paso

En el archivo que requiere interacción front-end y back-end, defina el método

async [方法名] (params) {
        const result = await this.$api.loadMenu(params) // result即为后台返回的数据，params为传入的参数，loadMenu为api.js中自定义的方法名
}

 

Pequeños consejos:

 

Si encuentra un problema entre dominios, debe configurarlo en la herramienta de desarrollo del subprograma WeChat

Marque aquí ~