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

小云云
Libérer: 2018-02-07 15:59:29
original
4429 Les gens l'ont consulté

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
      })
    })
  }
Copier après la connexion

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
}
Copier après la connexion

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
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!