Detailliertes Beispiel für die Kapselung des WeChat-Applets wx.request

Ich habe kürzlich selbst versucht, kleine Programme zu entwickeln, und es gibt immer Fallstricke, aber ich finde den Anforderungsteil wirklich hässlich, also habe ich Promise verwendet, um die Anforderung einfach zu kapseln. Die in diesem Artikel beschriebene Methode dient hauptsächlich der Anmeldung durch Dritte.

Ohne weitere Umschweife posten Sie einfach den Code:

Geschäftsbezogene js

// 获取剩余金额 --- GET 请求无参数
  getBalance: function () {
    api.getBalance().then(data => {
      let balance = data.data
      balance.balance = balance.balance.toFixed(2)
      this.setData({
        balance: { ...balance }
      })
    })
  },
  // 获取昨日消费数据 --- POST 请求，使用 application/x-www-form-urlencoded 传参
  getLastCost: function () {
    let yestoday = util.transDate('', -1)
    let data = {
      subAccountIdx: 0,
      startDay: yestoday,
      endDay: yestoday,
      type: 0,
      business: 0,
      export: false
    }
    api.getLastCost(data, 'application/x-www-form-urlencoded', 'POST').then(data => {
      let lastCost = data.data.record.totalConsumeMoney
      lastCost = lastCost.toFixed(2)
      this.setData({
        lastCost: lastCost
      })
    })
  }

Der obige Code ist der Geschäftsteilcode. Ich weiß nicht, ob Sie Wie diese Methode, dann werfen wir einen Blick auf die Kapselungsmethode und die entsprechende Konfiguration von js

Verwenden Sie Promise, um wx.request zu kapseln

Die meisten unserer Websites verwenden Cookies, um den Anmeldestatus aufrechtzuerhalten. Aber das Miniprogramm lautet: Wenn Cookies nicht zum Aufrechterhalten des Anmeldestatus verwendet werden können, erhalten wir zuerst das Cookie im Anforderungsheader und speichern es dann in einer globalen Variablen (ich glaube, es ist kein Problem, das Cookie zu erhalten, aber dieser Teil wird nicht angezeigt)

// wx.request 封装
var app = getApp() 
function wxRequest(url, config, resolve, reject) {
  let { 
    data = {},
    contentType = 'application/json',
    method = 'GET',
    ...other
  } = {...config}
  wx.request({
    url: url,
    data: {...data},
    method: method,
    header: {
      'content-type': contentType,
      'Cookie': app.globalData.cookie  // 全局变量中获取 cookie
    },
    success: (data) => resolve(data),
    fail: (err) => reject(err)
  })
}
module.exports = {
  wxRequest: wxRequest
}

Der gekapselte Code ist sehr einfach, und der nächste Schritt ist der Konfigurationscode

Konfiguration js entsprechend dem Unternehmen

// 用 import 或者 require 引入模块 
import util from '../../../util/util.js'
var Promise = require('../../../plugin/promise.js')    // 请注意 Promise 要手动引入，内测版是自动引入的
// 获取个人信息
const API_USERINFO = "https://www.***/get"
// 获取剩余金额
const API_BALANCE = 'https://www.***/get'
// 获取昨日消费数据
const API_LASTCOST = 'https://www.***/get'
// 获取个人信息事件  
function getUserInfo(data, contentType) {
  var promise = new Promise((resolve, reject) => {
    util.wxRequest(API_USERINFO, { data, contentType }, resolve, reject)
  })
  // return promise
  return promise.then(res => {
    return res.data
  }).catch(err => {
    console.log(err) 
  })
}
// 获取剩余金额事件
function getBalance(data, contentType) {
  var promise = new Promise((resolve, reject) => {
    util.wxRequest(API_BALANCE, { data, contentType }, resolve, reject)
  })
  // return promise
  return promise.then(res => {
    return res.data
  }).catch(err => {
    console.log(err)
  })
}
// 获取昨日消费数据
function getLastCost(data, contentType, method) {
  var promise = new Promise((resolve, reject) => {
    util.wxRequest(API_LASTCOST, { data, contentType, method }, resolve, reject)
  })
  // return promise
  return promise.then(res => {
    return res.data
  }).catch(err => {
    console.log(err)
  })
}
module.exports = {
  getUserInfo: getUserInfo,
  getBalance: getBalance,
  getLastCost: getLastCost
}

Der obige Code scheint mehr Schritte zu haben, aber der Vorteil ist, dass er im Geschäftscode einfach zu warten ist und sich nur auf das Geschäft konzentriert, anstatt auf die Anforderung selbst Sie haben nur eine Methode zum Übergeben von Parametern. Als Front-End-Neuling hoffe ich, dass dieser Artikel einigen Leuten helfen kann, und vor allem hoffe ich, dass dies der Fall ist Jungs werden euch ein paar Ratschläge und Hinweise geben.

Verwandte Empfehlungen:

WeChat-Applet wx.request realisiert Hintergrunddateninteraktionsfunktionsanalyse

Miniprogrammentwicklung - Netzwerkanfrage wx .request Instanz-Tutorial

Miniprogrammentwicklung – wx.request asynchrones Kapselungsinstanz-Tutorial

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Kapselung des WeChat-Applets wx.request. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!