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方法封裝的就差不多了
