微信小程序 http請(qǐng)求封裝詳解及實(shí)例代碼
微信小程序 http請(qǐng)求封裝
示例代碼
wx.request({ url: 'test.php', //僅為示例,并非真實(shí)的接口地址 data: { x: '' , y: '' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) }, fail: function( res ) { fail( res ); } })
以上為小程序的基本http請(qǐng)求代碼,實(shí)際代碼中如果每次這樣來寫是比較繁瑣的,那我們就來做一下封裝。
那代碼中我們比較關(guān)注什么?
1.請(qǐng)求的參數(shù),訪問的接口
2.GET/POST...請(qǐng)求方式
3.請(qǐng)求參數(shù)統(tǒng)一處理(比如:加密、設(shè)置公共參數(shù)...)
4.請(qǐng)求成功返回的數(shù)據(jù)(比如:解密、抽離邏輯層數(shù)據(jù))
5.請(qǐng)求失敗反饋
我們不關(guān)注什么?
1.請(qǐng)求url(一般固定的配置在某個(gè)地方)
2.根據(jù)不同的接口規(guī)則做不同的請(qǐng)求參數(shù)(比如:參數(shù)加密等)
...
讓我們代碼實(shí)操
network.js
var API_URL = 'http://localhost/loverule/api/api.php' var requestHandler = { params:{}, success: function(res){ // success }, fail: function() { // fail }, } //GET請(qǐng)求 function GET(requestHandler) { request('GET',requestHandler) } //POST請(qǐng)求 function POST(requestHandler) { request('POST',requestHandler) } function request(method,requestHandler) { //注意:可以對(duì)params加密等處理 var params = requestHandler.params; wx.request({ url: API_URL, data: params, method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 設(shè)置請(qǐng)求的 header success: function(res){ //注意:可以對(duì)參數(shù)解密等處理 requestHandler.success(res) }, fail: function() { requestHandler.fail() }, complete: function() { // complete } }) } module.exports = { GET: GET, POST: POST }
1.頁(yè)面中調(diào)用(以GET請(qǐng)求為例)
//導(dǎo)入js var network = require("../../utils/network.js") //寫入?yún)?shù) var params = new Object() params.api_name = "api_user_login" params.account = "hanqing" params.password = "123456" //發(fā)起請(qǐng)求 network.GET( { params: params, success: function (res) { console.log(res) //拿到解密后的數(shù)據(jù),進(jìn)行代碼邏輯 }, fail: function () { //失敗后的邏輯 }, })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
Skypack布局前端基建實(shí)現(xiàn)過程詳解
這篇文章主要為大家介紹了Skypack布局前端基建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序 swiper制作tab切換實(shí)現(xiàn)附源碼
這篇文章主要介紹了微信小程序 swiper制作tab切換實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01JS前端性能優(yōu)化解決內(nèi)存泄漏頁(yè)面崩潰
這篇文章主要為大家介紹了JS前端性能優(yōu)化解決內(nèi)存泄漏頁(yè)面崩潰示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序開發(fā)之相冊(cè)選擇和拍照詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序開發(fā)之相冊(cè)選擇和拍照詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02JavaScript日拱算法題解滑動(dòng)窗口的最大值示例
這篇文章主要為大家介紹了JavaScript日拱算法題解滑動(dòng)窗口的最大值實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Server-sent?events實(shí)時(shí)獲取服務(wù)端數(shù)據(jù)技術(shù)詳解
這篇文章主要為大家介紹了Server-sent?events實(shí)時(shí)獲取服務(wù)端數(shù)據(jù)技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序 wx.request方法的異步封裝實(shí)例詳解
這篇文章主要介紹了微信小程序 wx.request方法的異步封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05