業(yè)務(wù)對(duì)象的重要性：

?在上一次小程序高級(jí)電商前端第1周走進(jìn)Web全棧工程師<一>----小程序注冊(cè)、開(kāi)發(fā)工具推薦、《風(fēng)袖》首頁(yè)布局詳盡分析、Webstorm開(kāi)發(fā)小程序必配配置、mock數(shù)據(jù)已經(jīng)實(shí)現(xiàn)了對(duì)于首頁(yè)頂部主題數(shù)據(jù)處理，不過(guò)目前看一下咱們請(qǐng)求的代碼：

這里就得啰嗦一下關(guān)于小程序代碼層級(jí)的問(wèn)題了，屬于思想層面的，往往這些才是最讓自己能夠成長(zhǎng)的東西，本身寫(xiě)業(yè)務(wù)代碼并不是一個(gè)很困難的事，所以這種啰嗦是很有必要的，由于js是一種動(dòng)態(tài)語(yǔ)言，它本身是沒(méi)有類型約束的，所以如果不給它分層那隨著業(yè)務(wù)的編寫(xiě)這里面的代碼就會(huì)變得非常之臃腫不好維護(hù)，那回到咱們目前這個(gè)js文件：

很明顯它是一種頁(yè)面級(jí)別的js，而它里面的職責(zé)主要是用來(lái)控制數(shù)據(jù)綁定，也就是類似于MVC中的C層，它是View層和M業(yè)務(wù)邏輯層的一個(gè)橋梁，不應(yīng)該負(fù)責(zé)具體的業(yè)務(wù)邏輯的，所以這里分出一個(gè)M層了來(lái)，新建一個(gè)目錄：

好，接下來(lái)則需要來(lái)新建一個(gè)業(yè)務(wù)的js文件，那么接下來(lái)又得啰嗦一下了，這個(gè)業(yè)務(wù)js的文件名取名成啥呢？這里的業(yè)務(wù)叫網(wǎng)絡(luò)么？很顯然網(wǎng)絡(luò)不可能是一個(gè)業(yè)務(wù)對(duì)象，這里業(yè)務(wù)對(duì)象應(yīng)該是主題，因?yàn)檎?qǐng)求的就是主題的數(shù)據(jù)嘛，所以咱們這樣取名：

這里一定要重視業(yè)務(wù)對(duì)象的尋找，它對(duì)于一個(gè)復(fù)雜的商用項(xiàng)目是很重要的，接下來(lái)咱們則來(lái)定義一個(gè)業(yè)務(wù)方法：

但是！！！這個(gè)命名也是有問(wèn)題的。。好吧，一個(gè)這么簡(jiǎn)單的東東引出這么多“思想”問(wèn)題，值得么？當(dāng)然是值得的，扣得越細(xì)你的提升則越多， 你看一下這個(gè)方法名很明顯是獲取頂部的主題，貌似沒(méi)啥毛病呀，在首頁(yè)不就是頂部么？

嗯，確實(shí)是，但是！！還會(huì)有很多其它的Theme，那你咋命令呢？由于它是一個(gè)sale的主題，那這樣改唄：

也就是名字中增加了業(yè)務(wù)字段，很明顯也不太好，因?yàn)檫@塊位置未來(lái)是動(dòng)態(tài)可以配置的，有可能還可以配優(yōu)惠券之類的，所以這里建議是像這種不要以業(yè)務(wù)來(lái)給它命名，可以給它們定義一些編號(hào)，像這樣：

嗯，不過(guò)更加好的命令應(yīng)該再加一個(gè)單詞：

因?yàn)橛锌赡芷渌?yè)面也需要Theme，加一個(gè)頁(yè)面則會(huì)更加的清晰。

封裝HTTP請(qǐng)求：

接下來(lái)咱們則把網(wǎng)絡(luò)請(qǐng)求的代碼剪切到這個(gè)業(yè)務(wù)方法中來(lái)：

嗯，貌似很完美，但是很明顯這塊代碼有問(wèn)題：

那怎么解決呢，用回調(diào)，如下：

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)}})} }

此時(shí)在我們的home.js的生命周期中就可以這樣來(lái)調(diào)用了，當(dāng)然啦先要將咱們新建的js導(dǎo)出一下：

調(diào)用：

編譯運(yùn)行其界面顯示一切正常，那就完美了么？其實(shí)不然，雖說(shuō)現(xiàn)在home.js中代碼清爽了，但是！！對(duì)于業(yè)務(wù)網(wǎng)絡(luò)請(qǐng)求每次還是寫(xiě)起來(lái)比較麻煩，所以有必要對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行一個(gè)二次封裝，以應(yīng)對(duì)未來(lái)若干個(gè)大量的業(yè)務(wù)的網(wǎng)絡(luò)請(qǐng)求的應(yīng)用效率：

對(duì)于網(wǎng)絡(luò)請(qǐng)求應(yīng)該算是一個(gè)工具類，所以咱們封裝成一個(gè)工具方法，在我們新建小程序工程時(shí)默認(rèn)IDE為我們生成了一個(gè)工具文件：

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 }

這里刪除它，對(duì)我們沒(méi)啥用，新建一個(gè)咱們自己的：

具體的代碼比較簡(jiǎn)單，直接貼代碼了：

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 }

接下來(lái)回到咱們的業(yè)務(wù)方法中，調(diào)用就比較簡(jiǎn)單了：

不過(guò)這里有個(gè)細(xì)節(jié)還得優(yōu)化一下，對(duì)于方法參數(shù)的傳遞其實(shí)用這種對(duì)象的方式語(yǔ)義會(huì)更加的清晰：

而我們目前是直接傳遞的：

所以改造一下，比較簡(jiǎn)單：

此時(shí)咱們就可以用對(duì)象的方式來(lái)傳遞參數(shù)了：

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 }

其實(shí)像Flutter中的命名參數(shù)也是類似的寫(xiě)法，此時(shí)咱們的調(diào)用又更加簡(jiǎn)單了，編譯運(yùn)行界面一切正常。

小程序中使用async和await的難點(diǎn)分析：

對(duì)于上面的封裝已經(jīng)“接近”完美了，為啥說(shuō)“接近”呢？ 因?yàn)檫€有不完美的地方嘛，有兩層回調(diào)，代碼顯得比較亂：

其造成有兩層回調(diào)的根據(jù)原因在于請(qǐng)求網(wǎng)絡(luò)是一個(gè)異步處理，而在JS中處理異步有三種方式：

• callback
  這個(gè)是最常用的，但是如今用得較少了，因?yàn)榇a看著比較亂。
• promise
  這個(gè)比callback要強(qiáng)，沒(méi)有第三種好，但是！！它是第三中的一個(gè)必備的條件。
• async await
  這種也是如今比較推崇的寫(xiě)法了，像Koltin、Flutter都有這樣的寫(xiě)法，要能這樣寫(xiě)的前提必須我們要調(diào)用的功能上返回的是promise才可以。

那咱們要用async await那直接用就成了唄，先在要執(zhí)行異步的調(diào)用前面加上await：

報(bào)紅了是因?yàn)槿绻粋€(gè)函數(shù)內(nèi)部出現(xiàn)了await，則需要在函數(shù)聲明上加上async，如下：

但是！！！目前微信的wx.request是不會(huì)返回promise的，注意：并非只有返回promise的函數(shù)前面才能加await，其實(shí)函數(shù)返回普通的值也能加，但是加了await是沒(méi)啥意義的，只有在promise前加await才有意義， 那。。說(shuō)了這么多居然用不了async await，那不是浪費(fèi)表情么？當(dāng)然能用，經(jīng)過(guò)一定的包裝能讓它轉(zhuǎn)換成帶promise的函數(shù)，下面就來(lái)看一下如何來(lái)轉(zhuǎn)換。

使用LinUI Promisic讓小程序內(nèi)置API支持Promise：

這里則開(kāi)始對(duì)wx.request進(jìn)行一下包裝達(dá)到能返回promise，進(jìn)而可以使用async和await，那怎么弄呢？其實(shí)這里需要用到大神開(kāi)源的LinUI組件既可解決，可以參考Promisic 回調(diào)轉(zhuǎn)換 | Lin UI，在它網(wǎng)頁(yè)前言也描述了使用的背景：

在這里先不用LinUI組件，這是開(kāi)源的一個(gè)庫(kù)，需要進(jìn)行安裝，為了學(xué)習(xí)的連貫性暫且先不安裝，其實(shí)也就是一個(gè)函數(shù)，直接先拷到工程中來(lái)使用既可，如下：

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 }

其中很明顯看到參數(shù)就是一個(gè)函數(shù)，然后最終返回的是一個(gè)Promise：

具體的轉(zhuǎn)換細(xì)節(jié)暫且先不過(guò)多糾結(jié)，先用起來(lái)，怎么用呢，其實(shí)很簡(jiǎn)單：

此時(shí)就可以將回調(diào)給去掉了，因?yàn)樵蹅冋{(diào)用這個(gè)函數(shù)時(shí)就跟同步方法一樣了，不需要通過(guò)回調(diào)來(lái)拿結(jié)果了：

將回調(diào)函數(shù)全部替換為async和await：

接下來(lái)則可以將theme.js中的回調(diào)也改為async和await了，改法一樣：

接下來(lái)home.js中也得改寫(xiě)一下了：

接下來(lái)則編譯看一下有木有問(wèn)題：

報(bào)錯(cuò)了。。這是因?yàn)閍sync await是ES7的語(yǔ)法，而小程序現(xiàn)在是只支持ES6，要想支持ES7，則需要設(shè)置一下：

此時(shí)再編譯就木有報(bào)錯(cuò)了，但是！！！圖片出不來(lái)了：

這是為啥呢？從網(wǎng)絡(luò)請(qǐng)求中貌似數(shù)據(jù)也正常請(qǐng)求下來(lái)了：

這里將結(jié)果打出來(lái)瞅一下：

編譯：

所以咱們修改一下網(wǎng)絡(luò)請(qǐng)求返回的結(jié)果：

這樣對(duì)于整個(gè)HTTP的請(qǐng)求的封裝就比較完美了。

更正：

最后再來(lái)做一個(gè)更正說(shuō)明，其實(shí)在上一篇也說(shuō)明過(guò)了小程序高級(jí)電商前端第1周走進(jìn)Web全棧工程師<一>----小程序注冊(cè)、開(kāi)發(fā)工具推薦、《風(fēng)袖》首頁(yè)布局詳盡分析、Webstorm開(kāi)發(fā)小程序必配配置、mock數(shù)據(jù)，這里再來(lái)說(shuō)一下，因?yàn)椴徽f(shuō)明上面所寫(xiě)的無(wú)法正常在本地顯示的：

同樣這篇也是去年寫(xiě)的，所以。。

關(guān)注個(gè)人公眾號(hào)，獲得實(shí)時(shí)推送

總結(jié)

以上是生活随笔為你收集整理的小程序高级电商前端第1周走进Web全栈工程师＜二＞的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。