摘要:需要判斷服務器的用這一段我司服務器返回表示真正的成功,其他表示各種錯誤碼如何使用將上面的代碼寫到一個獨立的文件里,我的命名為。
一、對小程序的request的封裝
寫過小程序的應該知道,微信的request不封裝基本上不能用,寫的顯的太冗長,而且是回調式的,回調地獄什么的就不說了,可讀性差。 下面是我的封裝代碼,順便支持一下promise。
function baseRequest({ url, method, header, data, complete }, resolve, reject) { wx.request({ url, method, header, data, success: function (res) { // 需要判斷服務器code的用這一段 // 我司服務器返回0表示真正的成功,其他code表示各種錯誤碼 // if (res.data.code === 0) { // resolve(res) // } else { // reject(res) // } resolve(res) }, fail: function (res) { reject(res) }, complete: function (res) { complete(res) } }) } function requestPromise( options ) { let req = new Promise((resolve, reject) => { baseRequest(options, resolve, reject) }) return req } function get(options) { options.method = "GET" return requestPromise(options) } function post(options) { options.method = "POST" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options) } function put(options) { options.method = "PUT" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options) } module.exports = { get, post, put }
如何使用: 1. 將上面的代碼寫到一個獨立的文件里,我的命名為network.js。 2. 然后將其綁定到全局的 wx 對象身上。 wx.Network = require("./network.js")。(在app.js里面綁定) 3. 實例如下
wx.Network.get({ url: "xxx.xxx.xxx", // 請求路徑 data: { a: "a" // 參數列表 } }).then(res => { console.log("請求成功") }).catch(res => { console.log("請求失敗") })二、登錄鎖
基本的request請求封裝完了后,還有一些特殊的需求,比如 1. 在首頁我會進行登錄, 登錄后獲得token, 然后我拿著token去請求其他需要token才可以請求的接口 (比如個人購物信息) 2. 這個時候一種做法是登錄完成前不進行需要token的請求,并且有蒙板進行攔截操作(正在登錄ing...) 3. 對于我公來說這種方法有一個致命的弊端,就是在高并發的情況下,服務器的壓力很大,首頁的登錄接口很慢才有返回(進首頁即自動登錄),這個時候,用戶看到的界面就是loading,而且可能時間比較長,如果用戶對你的產品粘性不高,絕大部分人直接就走了 4. 為了優化這種情況下的用戶體驗,我們全面取消了登錄的loading,替換成了“登錄鎖”的形式 5. 效果為未登錄調用需要token的接口時,不請求,直到登錄完成后才會請求 6. 即如果這個請求需要token,那么先判斷有沒有登錄,如果沒有登錄,啟動定時器一段時間后(200ms),再次判斷,如果已經登錄,發出請求,如果沒有,重復以上操作 加了登錄鎖后的代碼如下: ( 添加了新的 wait 函數,調用get,post,put時增加第二個參數,表示是否需要token )
function baseRequest({ url, method, header, data, complete }, resolve, reject) { wx.request({ url, method, header, data, success: function (res) { // 需要判斷服務器code的用這一段 // 我司服務器返回0表示真正的成功,其他code表示各種錯誤碼 // if (res.data.code === 0) { // resolve(res) // } else { // reject(res) // } resolve(res) }, fail: function (res) { reject(res) }, complete: function (res) { complete(res) } }) } function wait(options, needToken, resolve, reject) { if (needToken) { var token = wx.getStorageSync("token") if (!token) { setTimeout(() => { wait.apply(null, arguments) }, 200) } else { if (!options.header) { options.header = {} } options.header["token"] = token baseRequest(options, resolve, reject) } } else { baseRequest(options, resolve, reject) } } function requestPromise( options, needToken = true ) { let req = new Promise((resolve, reject) => { wait(options, needToken, resolve, reject) }) return req } function get(options, needToken) { options.method = "GET" return requestPromise(options, needToken) } function post(options, needToken) { options.method = "POST" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options, needToken) } function put(options, needToken) { options.method = "PUT" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options, needToken) } module.exports = { get, post, put }
如何使用:(使用方式和上面一樣,只是調用的時候多一個參數) 1. 將上面的代碼寫到一個獨立的文件里,我的命名為network.js。 2. 然后將其綁定到全局的 wx 對象身上。 wx.Network = require("./network.js")。(在app.js里面綁定) 3. 實例如下
wx.Network.get({ url: "xxx.xxx.xxx", // 請求路徑 data: { a: "a" // 參數列表 } }, true // 增加第二個參數,true表示需要token, false表示不需要 ).then(res => { console.log("請求成功") }).catch(res => { console.log("請求失敗") })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/104216.html
摘要:中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示,截至年月,我國網民規模達億人,微信月活億支付寶月活億百度月活億另一方面,中國手機占智能手機整體的比例超過,月活約億。在年末正式發布了面向未來的跨端的。 開源中國專訪:Chameleon原理首發,其它跨多端統一框架都是假的? 原創: 嘉賓-張楠 開源中國 以往我們說某一功能跨多端,往往是指在諸如 PC、移動等不同類型的設備之...
摘要:背景之前小程序代碼混亂,所以新項目一開始就準備弄個微信小程序的的封裝流程先來說說整個流程里面已進入就去獲取用戶信息,如果沒有登錄則默認登錄,這里不做錯誤處理用戶必須同意授權才能進行操作,如果不同意授權則會一直跳轉到授權頁面在授權頁面點擊授權 背景 之前小程序代碼混亂,所以新項目一開始就準備弄個微信小程序的 request 的封裝 流程 先來說說整個流程: appjs 里面已進入就去獲...
摘要:背景之前小程序代碼混亂,所以新項目一開始就準備弄個微信小程序的的封裝流程先來說說整個流程里面已進入就去獲取用戶信息,如果沒有登錄則默認登錄,這里不做錯誤處理用戶必須同意授權才能進行操作,如果不同意授權則會一直跳轉到授權頁面在授權頁面點擊授權 背景 之前小程序代碼混亂,所以新項目一開始就準備弄個微信小程序的 request 的封裝 流程 先來說說整個流程: appjs 里面已進入就去獲...
摘要:背景之前小程序代碼混亂,所以新項目一開始就準備弄個微信小程序的的封裝流程先來說說整個流程里面已進入就去獲取用戶信息,如果沒有登錄則默認登錄,這里不做錯誤處理用戶必須同意授權才能進行操作,如果不同意授權則會一直跳轉到授權頁面在授權頁面點擊授權 背景 之前小程序代碼混亂,所以新項目一開始就準備弄個微信小程序的 request 的封裝 流程 先來說說整個流程: appjs 里面已進入就去獲...
閱讀 2474·2021-11-23 09:51
閱讀 533·2019-08-30 13:59
閱讀 1836·2019-08-29 11:20
閱讀 2542·2019-08-26 13:41
閱讀 3250·2019-08-26 12:16
閱讀 742·2019-08-26 10:59
閱讀 3336·2019-08-26 10:14
閱讀 608·2019-08-23 17:21