微信小程序封裝wx.request方法


wx.request的官方文檔,具體如何使用官方文檔里已經寫的很明白了:

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

 

wx.request是一個異步的方法,所以請求數據之后success回調函數的作用域發生了改變,this的指向不是當前函數

兩種方法可以改變this的指向:一種通過中間變量that。另一種通過ES6箭頭函數改變this作用域,通過這種方式我們可以把從服務端獲取的數據和頁面的data綁定到一起

另外可以使用promise,promise可以解決異步嵌套的問題,簡單的異步請求可以不使用promise

promise.then((res)=>{

console.log(res)

});

 

如果一個小程序的請求接口很多,那么全寫在一起會很難管理

所以在微信小程序中最好把常用的 wx.request請求封裝起來,把請求url根地址儲存到config.js里,在末尾export導出這個對象

接着在utils文件夾新建一個公共的http腳本文件http.js,並在頭部引用config.js

在http.js中定義一個http類,里面有個實例方法request,方法傳遞了一個參數對象,保存了wx.request請求所需要的參數

 

 

 

 在這個類的底部定義一個私有方法,用來顯示請求錯誤時出現的彈框

接着定義一些錯誤碼來顯示具體請求失敗時的錯誤,后續可以增加不同的錯誤碼

最后導出這個HTTP類

http模塊編寫完畢,調用方法如下圖:在url后直接跟baseurl后面的地址

 這只是一個基類存放了項目http請求基本的方法,接着進一步完善,在根目錄新建models文件夾,在這個文件夾里存放我們不同組件的不同業務請求,

首先新建Classic.js,在里面定義一個class類繼承前面寫好的http模塊,里面有個getLast方法用於獲得最近的期刊數據

接着把classic組件頭部的引用路徑改寫,這樣就可以直接使用classic.getLast方法,在getlast的回調方法里綁定數據到classicData上,除了setData里的數據,在data里定義的數據也可以直接在在頁面使用{{}}綁定數據,setData用作數據更新

 

到這里基本wx,request方法也都封裝完畢了,之后如果要如果添加新的請求,在后面添加即可

 

 

 接下來如果想把wx,request封裝的再好一些,可以再加一層promise,新建一個http-p.js文件,錯誤碼和底部的私有方法不變,在原有的http類上添加一層promise包裝

在books.js的models中引用這個http-p.js,寫入方法

 

 

 book.js中引用:

 

實例化

 

 

 

調用方式

 

 

 

 

 至此wx.request方法封裝的就差不多了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM