原創文章，若轉載請於明顯處標明出處和相關鏈接https://blog.csdn.net/jiangkai528/article/details/80850460
---------視頻更新，可通過以下鏈接查看本篇文章視頻教程------
微信小程序電商項目商品詳情頁開發實戰之wx.request網絡請求
https://mp.weixin.qq.com/s?__biz=MzUyNjg4NTc3NA==&mid=2247483714&idx=1&sn=c3b520fee0d1dba9b57f7bead72b304a&chksm=fa06b7a3cd713eb56e37032e83877c2c32d855b4d2dfe8948f5deb914a70b03185a3154e28be#rd前言：
隨着我們微信小程序電商項目教程視頻的連載，我們已經講了七節課了，不知道大家有沒有認真看完呢。如果你認真看完了，我相信你已經輕鬆瞭解了Flex佈局與CSS盒模型應用，WXML模板與WXSS應用，數據綁定與事件應用並在此過程中學會了電商項目商品列表和商品詳情頁等基本功能。但是，爲了大家更容易入門，目前我們的課程還比較傾向於模板頁面和樣式的部分，還未涉及API的部分，僅一句話帶過了一個名爲wx.navigateTo的跳轉頁面API 。
-----------分割線------------
一、在下一節視頻課開始前，我們先說一個非常重要的API，就是發起網絡請求，也就是wx.request。
這是微信小程序官網API列表裏面，位列第一位的API。
下圖是示例代碼，wx.request(OBJECT)中的OBJECT是參數相關的描述，包括url、data、header、method、dataType、success、fail等。如果大家有網絡開發的經驗，對這個肯定不陌生，這和普通的HTTP請求的設定並無二致。我們先看一下，小程序官方提供的wx.request API示例代碼：
這個示例代碼，定義這個網絡請求的url是test.php，傳遞的參數data 對象裏面是 x='' &y='' ，默認是GET請求，請求頭header裏面約定數據交互格式是JSON，額外又定義了請求成功success之後打個返回數據的日誌，沒定義失敗fail的處理邏輯，也未定義無論請求成功失敗只要完成complate的操作。那麼由此，你應該初步瞭解了，該如何發起一個網絡請求了吧。
二、如果以我們近期連載的小程序電商項目爲例，我們是不是可以寫一個單個獲取商品信息的示例？
如果我們在app.js裏面的globalData對象裏面，定義一個名爲apiUrl的參數，即可以約定一個請求URL的根路徑。那麼上圖我無需多言了，就是一個apiUrl/goods/get/${id}的這麼一個網絡請求。
請求成功（success）後，我們判斷一下服務器後臺返回的code是否表明商品列表獲取成功，並將data打印了一下日誌。有同學可能會說了，這不是超簡單的一個請求，和上面這個官方示例又沒啥區別。
那麼我說，彆着急啊，葫蘆裏面的賣的什麼藥，倒出來看看不就知道了。
三、要怎麼優雅？
你想啊，我們有商品列表、商品詳情、下單、訂單列表等很多功能模塊都要發起網絡請求啊，如果我們讓上述這種wx.request(OBJECT)請求，遍佈我們的代碼，會有什麼問題？第一個感覺是，重複和冗餘對麼？第二，如果我們的請求是需要傳遞會話祕鑰的，我們是不是要頻繁的寫祕鑰獲取的代碼？ 第三，如果請求失敗了，有沒有方便的重試機制？第四，我們網絡請求的代碼是不是過於的分散，以致於不好維護？
那麼重點來了，如何解決上述四個問題呢？我們以商品詳情頁獲取一個商品信息爲例，展示我們優雅的方式
我們在項目的api目錄（和pages這個目錄同級）下，利用面向對象的方式創建一個名爲api-good.js的類。你會發現在這個Good（api-good）類中，並未有wx.request的蹤影，僅僅定義了一個get（id，success,fail）方法，這個get（id，success,fail）方法裏面約定了請求的URL地址，並直接調用了來自common-api的api.Get這個方法，請求失敗或者成功，我們也直接用了傳進來的success和fail函數進行了異步處理。那麼是誰負責發起網絡請求的呢？顯而易見的，就是這個common-api.js裏面的Get方法。至於這個common-api的api.Get這個方法，我們稍後再說。
我們先看這個Good類有什麼優勢？以往對於商品詳情頁和列表頁等功能，我們需要在"/pages/good/detail/index.js"、"/pages/good/list/index.js" 等位置定義多個wx.request請求。但利用Good（api-good）類，我們可以將查詢單個商品、商品列表、收藏或點贊商品等諸多和商品相關的網絡請求管理起來，是不是避免了功能邏輯的網絡請求過於分散的情況？
接下來我們使用api-good的時候，在商品詳情頁"/pages/good/detail/index.js"裏面引入，並new出來一個good對象得到一個Good實例，然後我們就可以直接調用good實例的get（id，success,fail）方法了
獲取數據成功或者失敗，你都可以進行數據的邏輯處理了（比如將商品信息塞到全局的data {}對象裏面的屬性good:{}）。所以你應該發現了，我們的商品詳情頁"/pages/good/detail/index.js"裏面的網絡請求相對於前一個示例得到了極大簡化，我們只需要關注邏輯處理即可，極大的解放了生產力有木有？並且，我們在api-good這個類將網絡請求進一步抽象了。
那麼，我們還沒有解決一些header參數（例如會話祕鑰session_key），以及失敗重試的機制對吧。所以，我們來看一下common-api這個類是怎麼定義的？
四 、起底背後功臣——工具庫common-api
我們在libs目錄（和pages這個目錄同級）下，創建一個名爲common-api的工具類，我們先看上文提到的Get方法是如何定義的（順便加上Post方法）：
我們先不管本地緩存（Storage），只看Get和Post方法，它們同時調用了GetData這個方法，並將自己對應的method（get/post）傳遞了進去。
那麼這個GetData是怎麼實現的？我抽取部分代碼我們一起看下，GetData裏面調用了一個RequestData方法：
所以你最終發現，我們的工具類裏面還是落到了wx.request（OBJECT）這個微信官方的API，這裏麪包含了session_key的傳遞，至於session_key怎麼獲取和更新，以及請求重試機制我就不在這多講了。
五、結論
爲了更好的發起網絡請求，我們最好將代碼做一定的封裝和抽象，這至關重要，也是大家走向高級工程師之路的過程。不過再說一句重點，我是工程師但不高級，哈哈哈。
至於這樣是不是優雅，我也不肯定，畢竟我這個不是唯一答案，歡迎大家批評指正，也歡迎大家提出其他解決方案，我們一起探討。
後記
不知道大家有沒有瞭解到我所講的優雅，我基本上做了一個簡短的介紹，可能文章和代碼還不夠豐滿。不過沒關係，以這篇文章爲基礎，我還會以視頻的形式的講解實戰的。
歡迎大家繼續關注我，如果大家覺得我講的還不錯，歡迎大家幫我轉發和收藏。
大家可以關注我微信公衆號和頭條號——“前端琅琊閣”查看更多開發連載視頻。
歌德說：“向着某一天終於要達到的那個終極目標邁步還不夠，還要把每一步驟看成目標，使它作爲步驟而起作用。” 每天完成一小步，我們一起進步。直到有一天，會當凌絕頂，一覽衆山小。