這篇文章主要為大家展示了“微信小程序中wx.request封裝的示例分析”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中wx.request封裝的示例分析”這篇文章吧。
我們提供的服務(wù)有:網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、日土ssl等。為超過千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的日土網(wǎng)站制作公司業(yè)務(wù)相關(guān) js
// 獲取剩余金額 --- GET 請求無參數(shù) getBalance: function () { api.getBalance().then(data => { let balance = data.data balance.balance = balance.balance.toFixed(2) this.setData({ balance: { ...balance } }) }) }, // 獲取昨日消費(fèi)數(shù)據(jù) --- 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 }) }) }
從上面的代碼是業(yè)務(wù)部分代碼,不知道你是否喜歡這種方式呢,接下來就看看 封裝方式 和 業(yè)務(wù)對應(yīng)的配置 js
使用 Promise 封裝 wx.request
我們大部分網(wǎng)站都是用 cookie 來維護(hù)登錄狀態(tài)的,但是小程序是無法用 cookie 來維護(hù)登錄狀態(tài)的,那么我們先獲取請求頭的 cookie, 然后將 cookie 保存在全局變量當(dāng)中(相信獲取 cookie 肯定沒問題吧, 這部分就不展示了)
// 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 }
封裝的代碼很簡單,接下來就是配置代碼了
業(yè)務(wù)對應(yīng)的配置 js
// 用 import 或者 require 引入模塊 import util from '../../../util/util.js' var Promise = require('../../../plugin/promise.js') // 請注意 Promise 要手動引入,內(nèi)測版是自動引入的 // 獲取個人信息 const API_USERINFO = "https://www.***/get" // 獲取剩余金額 const API_BALANCE = 'https://www.***/get' // 獲取昨日消費(fèi)數(shù)據(jù) 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) }) } // 獲取昨日消費(fèi)數(shù)據(jù) 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 }
上面的代碼看起來像是步驟變多了,但是這樣的好處是維護(hù)方便,在業(yè)務(wù)代碼里只關(guān)注業(yè)務(wù),而不用去關(guān)注請求的本身,content-type 切換也方便,當(dāng)然如果你們的傳參方式只有一種可以寫死更簡單一些,作為前端菜鳥的第一篇文章希望能幫助到幾個人,最希望大佬們不吝賜教,指點(diǎn)指點(diǎn)。
以上是“微信小程序中wx.request封裝的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁標(biāo)題:微信小程序中wx.request封裝的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址:http://bm7419.com/article16/didcgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站策劃、微信小程序、軟件開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容