小程序高级电商前端第1周走进Web全栈工程师＜二＞
業務對象的重要性：
?在上一次小程序高級電商前端第1周走進Web全棧工程師<一>----小程序注冊、開發工具推薦、《風袖》首頁布局詳盡分析、Webstorm開發小程序必配配置、mock數據已經實現了對于首頁頂部主題數據處理，不過目前看一下咱們請求的代碼：
這里就得啰嗦一下關于小程序代碼層級的問題了，屬于思想層面的，往往這些才是最讓自己能夠成長的東西，本身寫業務代碼并不是一個很困難的事，所以這種啰嗦是很有必要的，由于js是一種動態語言，它本身是沒有類型約束的，所以如果不給它分層那隨著業務的編寫這里面的代碼就會變得非常之臃腫不好維護，那回到咱們目前這個js文件：
很明顯它是一種頁面級別的js，而它里面的職責主要是用來控制數據綁定，也就是類似于MVC中的C層，它是View層和M業務邏輯層的一個橋梁，不應該負責具體的業務邏輯的，所以這里分出一個M層了來，新建一個目錄：
好，接下來則需要來新建一個業務的js文件，那么接下來又得啰嗦一下了，這個業務js的文件名取名成啥呢？這里的業務叫網絡么？很顯然網絡不可能是一個業務對象，這里業務對象應該是主題，因為請求的就是主題的數據嘛，所以咱們這樣取名：
這里一定要重視業務對象的尋找，它對于一個復雜的商用項目是很重要的，接下來咱們則來定義一個業務方法：
但是！！！這個命名也是有問題的。。好吧，一個這么簡單的東東引出這么多“思想”問題，值得么？當然是值得的，扣得越細你的提升則越多， 你看一下這個方法名很明顯是獲取頂部的主題，貌似沒啥毛病呀，在首頁不就是頂部么？
嗯，確實是，但是！！還會有很多其它的Theme，那你咋命令呢？由于它是一個sale的主題，那這樣改唄：
也就是名字中增加了業務字段，很明顯也不太好，因為這塊位置未來是動態可以配置的，有可能還可以配優惠券之類的，所以這里建議是像這種不要以業務來給它命名，可以給它們定義一些編號，像這樣：
嗯，不過更加好的命令應該再加一個單詞：
因為有可能其它頁面也需要Theme，加一個頁面則會更加的清晰。
封裝HTTP請求：
接下來咱們則把網絡請求的代碼剪切到這個業務方法中來：
嗯，貌似很完美，但是很明顯這塊代碼有問題：
那怎么解決呢，用回調，如下：
import {config} from "../config/config";class Theme {static getHomeLocationA(callback) {wx.request({url: `${config.apiBaseUrl}theme/by/names`,method: 'GET',data: {names: 't-1'},header: {Authorization: config.appKey},success: res => {callback(res.data)}})} }此時在我們的home.js的生命周期中就可以這樣來調用了，當然啦先要將咱們新建的js導出一下：
調用：
編譯運行其界面顯示一切正常，那就完美了么？其實不然，雖說現在home.js中代碼清爽了，但是！！對于業務網絡請求每次還是寫起來比較麻煩，所以有必要對網絡請求進行一個二次封裝，以應對未來若干個大量的業務的網絡請求的應用效率：
對于網絡請求應該算是一個工具類，所以咱們封裝成一個工具方法，在我們新建小程序工程時默認IDE為我們生成了一個工具文件：
const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') }const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n }module.exports = {formatTime: formatTime }這里刪除它，對我們沒啥用，新建一個咱們自己的：
具體的代碼比較簡單，直接貼代碼了：
import {config} from "../config/config";class Http {static request(url, data, method = 'GET', callback) {wx.request({url: `${config.apiBaseUrl}${url}`,method,data,header: {Authorization: config.appKey},success: res => {callback(res.data)}})} }export {Http }接下來回到咱們的業務方法中，調用就比較簡單了：
不過這里有個細節還得優化一下，對于方法參數的傳遞其實用這種對象的方式語義會更加的清晰：
而我們目前是直接傳遞的：
所以改造一下，比較簡單：
此時咱們就可以用對象的方式來傳遞參數了：
import {Http} from "../utils/http";class Theme {static getHomeLocationA(callback) {Http.request({url: `theme/by/names`,data: {names: 't-1'},callback: data => {callback(data)}})} }export {Theme }其實像Flutter中的命名參數也是類似的寫法，此時咱們的調用又更加簡單了，編譯運行界面一切正常。
小程序中使用async和await的難點分析：
對于上面的封裝已經“接近”完美了，為啥說“接近”呢？ 因為還有不完美的地方嘛，有兩層回調，代碼顯得比較亂：
其造成有兩層回調的根據原因在于請求網絡是一個異步處理，而在JS中處理異步有三種方式：
- callback
這個是最常用的，但是如今用得較少了，因為代碼看著比較亂。 - promise
這個比callback要強，沒有第三種好，但是！！它是第三中的一個必備的條件。 - async await
這種也是如今比較推崇的寫法了，像Koltin、Flutter都有這樣的寫法，要能這樣寫的前提必須我們要調用的功能上返回的是promise才可以。
那咱們要用async await那直接用就成了唄，先在要執行異步的調用前面加上await：
報紅了是因為如果一個函數內部出現了await，則需要在函數聲明上加上async，如下：
但是！！！目前微信的wx.request是不會返回promise的，注意：并非只有返回promise的函數前面才能加await，其實函數返回普通的值也能加，但是加了await是沒啥意義的，只有在promise前加await才有意義， 那。。說了這么多居然用不了async await，那不是浪費表情么？當然能用，經過一定的包裝能讓它轉換成帶promise的函數，下面就來看一下如何來轉換。
使用LinUI Promisic讓小程序內置API支持Promise：
這里則開始對wx.request進行一下包裝達到能返回promise，進而可以使用async和await，那怎么弄呢？其實這里需要用到大神開源的LinUI組件既可解決，可以參考Promisic 回調轉換 | Lin UI，在它網頁前言也描述了使用的背景：
在這里先不用LinUI組件，這是開源的一個庫，需要進行安裝，為了學習的連貫性暫且先不安裝，其實也就是一個函數，直接先拷到工程中來使用既可，如下：
const promisic = function (func) {return function (params = {}) {return new Promise((resolve, reject) => {const args = Object.assign(params, {success: (res) => {resolve(res);},fail: (error) => {reject(error);}});func(args);});}; };export {promisic }其中很明顯看到參數就是一個函數，然后最終返回的是一個Promise：
具體的轉換細節暫且先不過多糾結，先用起來，怎么用呢，其實很簡單：
此時就可以將回調給去掉了，因為咱們調用這個函數時就跟同步方法一樣了，不需要通過回調來拿結果了：
將回調函數全部替換為async和await：
接下來則可以將theme.js中的回調也改為async和await了，改法一樣：
接下來home.js中也得改寫一下了：
接下來則編譯看一下有木有問題：
報錯了。。這是因為async await是ES7的語法，而小程序現在是只支持ES6，要想支持ES7，則需要設置一下：
此時再編譯就木有報錯了，但是！！！圖片出不來了：
這是為啥呢？從網絡請求中貌似數據也正常請求下來了：
這里將結果打出來瞅一下：
編譯：
所以咱們修改一下網絡請求返回的結果：
這樣對于整個HTTP的請求的封裝就比較完美了。
更正：
最后再來做一個更正說明，其實在上一篇也說明過了小程序高級電商前端第1周走進Web全棧工程師<一>----小程序注冊、開發工具推薦、《風袖》首頁布局詳盡分析、Webstorm開發小程序必配配置、mock數據，這里再來說一下，因為不說明上面所寫的無法正常在本地顯示的：
同樣這篇也是去年寫的，所以。。
關注個人公眾號，獲得實時推送
總結
以上是生活随笔為你收集整理的小程序高级电商前端第1周走进Web全栈工程师＜二＞的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 等视距游戏 地图X和Y转换
- 下一篇： 风袖第一阶段之每周上新