您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“微信小程序怎么使用Promise對wx.request()封裝”,內(nèi)容詳細,步驟清晰,細節(jié)處理妥當(dāng),希望這篇“微信小程序怎么使用Promise對wx.request()封裝”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
wx.request官網(wǎng)說明
回調(diào)地獄,可能會出現(xiàn)多層success套用的情況(用Promise封裝解決)
效率低,代碼冗雜,每次都要寫共同的參數(shù)(比如headers,公共的url)
可維護性差,后續(xù)查看和改代碼不方便,封裝后都在同一個文件,一目了然
wx.request({ url: 'example.php', //僅為示例,并非真實的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默認值 }, success (res) { console.log(res.data) } })
作為一個合格的前端開發(fā),為了代碼質(zhì)量和可維護性(不是因為懶),肯定要對這種代碼進行封裝,來讓我們的代碼變得更優(yōu)雅~~
所有的封裝思路(無論是組件還是邏輯代碼),總結(jié)起來一句話就是抽取共性。
觀察我們的網(wǎng)絡(luò)請求代碼,可以發(fā)現(xiàn),有很多是一樣的,如公共請求路徑、對響應(yīng)錯誤的處理方法、headers參數(shù)(如token)。
不同的如具體的接口地址、請求類型、請求參數(shù),我們封裝的時候把相同的抽取成一個文件,不同的地方再進行傳參即可。
先建一個api文件夾(叫什么都可以,但是為了規(guī)范化),在下面新建文件request.js
// ----http---- // api URL const apiUrl = "https://接口地址:端口";// 公共的請求地址 // 封裝微信請求方法 const request = (params) => { let url = params.url; let data = params.data; let method = params.method; let header = { "Content-Type": "application/json" }; // 鑒權(quán)驗證,獲取登錄之后后端返回的token,存在即在頭部Authorization寫token,具體的看后端需求 if (wx.getStorageSync("token")) { // header.Authorization = wx.getStorageSync("token"); header.token = wx.getStorageSync("token"); } return new Promise((resolve, reject) => { wx.request({ url: apiUrl + url, // api url method: method, // get/post data: data, // 請求參數(shù) header: header, // 頭部 success(res) { // 請求成功 // 判斷狀態(tài)碼---errCode狀態(tài)根據(jù)后端定義來判斷 if (res.statusCode < 399) { if (res.data.Code === 401) { wx.showModal({ title: "提示", content: "請登錄", showCancel: false, success(res) { wx.navigateTo({ url: "/pages/login/login", }); }, }); reject(res.data); } resolve(res.data); } else { // 其他異常 switch (res.statusCode) { case 404: wx.showToast({ title: '未知異常', duration: 2000, }) break; default: wx.showToast({ title: '請重試...', duration: 2000, }) break; } reject("未知錯誤,請稍后再試"); } }, fail(err) { if (err.errMsg.indexOf('request:fail') !== -1) { wx.showToast({ title: '網(wǎng)絡(luò)異常', icon: "error", duration: 2000 }) } else { wx.showToast({ title: '未知異常', duration: 2000 }) } reject(err); }, complete() { wx.hideLoading() }, }); }); }; module.exports = { apiUrl, request, }
然后再按業(yè)務(wù)需求,對具體的接口地址進行封裝,比如,我這里在api文件夾下再新建一個user.js
文件,里面放登錄,注冊的一些方法,請求類型和請求參數(shù)根據(jù)接口文檔寫。
import { request } from "./request" // 用戶相關(guān) // 登錄 export const login = (params) => { return request({ url: '/user/login', data: params, method: 'POST', }) } // 注冊 export const register = (params) => { return request({ url: '/user/reg', data: params, method: 'POST', }) }
正式在項目中使用:
import { login } from '../../../api/user' // 點擊登錄的方法 handleLogin(){ login({ name: xxx, password: xxx, }).then((res) => { if (res.code == 200) { // 登錄成功之后的處理 } else { // 登錄失敗的處理 } }).catch((res) => {}) }
讀到這里,這篇“微信小程序怎么使用Promise對wx.request()封裝”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。