自學(xué)轉(zhuǎn)行到前端也已近兩年,也算是簡(jiǎn)書和掘金的忠實(shí)粉絲,但是以前一直惜字如金(實(shí)在是膽子小,水平又低),現(xiàn)在我決定視金錢如糞土(就只是臉皮厚了,水平就那樣),好了廢話不多說,切入主題,最近自己嘗試了一下小程序開發(fā),坑么總是有的,但是我覺得還是request這部分實(shí)在是不好看,所以你懂得,我用Promise 對(duì)請(qǐng)求做了個(gè)簡(jiǎn)單封裝。本文章所述方法主要針對(duì)第三方登錄 廢話不多說直接貼代碼: 業(yè)務(wù)相關(guān) js// 獲取剩余金額 --- GET 請(qǐng)求無參數(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 請(qǐng)求,使用 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ù)對(duì)應(yīng)的配置 js 使用 Promise 封裝 wx.request我們大部分網(wǎng)站都是用 cookie 來維護(hù)登錄狀態(tài)的,但是小程序是無法用 cookie 來維護(hù)登錄狀態(tài)的,那么我們先獲取請(qǐng)求頭的 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 } 封裝的代碼很簡(jiǎn)單,接下來就是配置代碼了 業(yè)務(wù)對(duì)應(yīng)的配置 js// 用 import 或者 require 引入模塊 import util from '../../../util/util.js' var Promise = require('../../../plugin/promise.js') // 請(qǐng)注意 Promise 要手動(dòng)引入,內(nèi)測(cè)版是自動(dòng)引入的 // 獲取個(gè)人信息 const API_USERINFO = "https://www.***/get" // 獲取剩余金額 const API_BALANCE = 'https://www.***/get' // 獲取昨日消費(fèi)數(shù)據(jù) const API_LASTCOST = 'https://www.***/get' // 獲取個(gè)人信息事件 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)注請(qǐng)求的本身,content-type 切換也方便,當(dāng)然如果你們的傳參方式只有一種可以寫死更簡(jiǎn)單一些,作為前端菜鳥的第一篇文章希望能幫助到幾個(gè)人,最希望大佬們不吝賜教,指點(diǎn)指點(diǎn)。 |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)