WeChat 애플릿 wx.request의 캡슐화에 대한 자세한 예

최근에 제가 직접 소규모 프로그램 개발을 해봤는데 항상 함정이 있긴 한데 요청 부분이 정말 못생긴 것 같아서 Promise를 이용해서 요청을 간단하게 캡슐화했습니다. 이 문서에 설명된 방법은 주로 타사 로그인을 위한 것입니다.

더 이상 헛소리하지 말고 코드를 붙여넣으세요.

비즈니스 관련 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
      })
    })
  }

위 코드는 비즈니스 부분 코드입니다. 다음으로 패키징 방법을 살펴보겠습니다.

Promise를 사용하여 wx.request를 캡슐화합니다

대부분의 당사 웹사이트는 로그인 상태를 유지하기 위해 쿠키를 사용하지만 소규모 프로그램에서는 쿠키를 사용하여 로그인 상태를 유지할 수 없으므로 먼저 해당 쿠키를 얻습니다. 헤더를 요청한 후 쿠키를 저장합니다. 전역 변수 중 (쿠키를 가져오는 것은 문제 없을 거라 생각하는데 이 부분은 보이지 않을 것입니다.)

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

캡슐화된 코드는 매우 간단하며 다음 단계는 구성 코드입니다.

비즈니스에 해당하는 구성 js

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

위의 코드는 다음과 같습니다. 단계가 더 많은 것 같지만, 이것의 장점은 비즈니스 코드에서는 유지 관리가 쉽다는 것입니다. 요청 자체도 편리합니다. 물론 매개 변수를 전달하는 방법이 하나만 있으면 작성하기가 더 쉽습니다. 프런트엔드 초보자로서 이것이 가능했으면 좋겠습니다. 내가 가장 바라는 것은 큰 사람들이 당신에게 조언과 조언을 해줄 것이라는 것입니다.

관련 권장 사항:

WeChat 애플릿 wx.request는 백그라운드 데이터 상호 작용 기능 분석을 실현합니다.

애플릿 개발 - 네트워크 요청 wx.request 예제 튜토리얼

애플릿 개발 - wx.request 비동기 캡슐화 예제 튜토리얼

위 내용은 WeChat 애플릿 wx.request의 캡슐화에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!