Exemple détaillé d'encapsulation de l'applet WeChat wx.request

J'ai récemment essayé moi-même le développement de petits programmes, et il y a toujours des pièges, mais je pense que la partie requête est vraiment moche, alors vous savez, j'ai utilisé Promise pour simplement encapsuler la requête. La méthode décrite dans cet article concerne principalement la connexion par des tiers.

Sans plus tarder, postez simplement le code :

Js liés au business

// 获取剩余金额 --- 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
      })
    })
  }

Le code ci-dessus est le code de la partie business Je ne sais pas si vous. comme cette méthode. , jetons ensuite un coup d'œil à la méthode d'encapsulation et à la configuration commerciale correspondante js

Utiliser Promise pour encapsuler wx.request

La plupart de nos sites Web utilisent des cookies pour maintenir le statut de connexion, mais le mini-programme est Si les cookies ne peuvent pas être utilisés pour maintenir le statut de connexion, alors nous obtenons d'abord le cookie dans l'en-tête de la requête, puis enregistrons le cookie dans la variable globale (je pense que ce n'est pas un problème d'obtenir le cookie, et cela la partie ne sera pas affichée)

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

Le code encapsulé est très simple, et l'étape suivante est le code de configuration

Configuration js correspondant à l'entreprise

// 用 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
}

Le code ci-dessus semble comporter plus d'étapes, mais l'avantage est qu'il est facile à maintenir. Dans le code métier, vous vous concentrez uniquement sur l'entreprise au lieu de la demande elle-même. Le changement de type de contenu est également pratique. vous n'avez qu'une seule méthode pour passer les paramètres, il sera plus facile de l'écrire à mort. C'est le premier article pour un débutant front-end. J'espère que cet article pourra aider quelques personnes, et surtout, j'espère que le grand. les gars vous donneront des conseils et des indications.

Recommandations associées :

L'applet WeChat wx.request réalise une analyse de la fonction d'interaction des données d'arrière-plan

Développement de mini-programmes - demande de réseau wx .request tutoriel d'instance

Développement de mini-programmes --wx.request tutoriel d'instance d'encapsulation asynchrone

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!