Promise實務 實作微信小程式介面封裝
- hzc轉載
- 2020-06-15 10:55:122662瀏覽
相信很多開發者都曾經遇到過回檔地獄的問題。由於微信小程式的API基本上都是基於回呼函數的非同步操作，如果不使用其他框架或封裝API，特別是使用較多的wx.request()，基本上很快就會遇到回呼地獄的問題，維護起來十分痛苦。
舉個例子
假設此時在正在開發一個社交小程序，其中有一個功能的是，小程序用戶在登入後，可以查看附近的人。
假設使用以下的實作思路，我們透過wx.getLocation()取得使用者目前位置，然後透過wx.request()請求後端資料。但在此之前需要登錄，參考先前官方文件推薦的登入方式，先呼叫wx.login()取得code，再用wx.request()請求開發者伺服器，成功回傳自訂登入態(一般為access_token或其他令牌形式)，之後再用自訂登入態請求業務資料。
為了方便看，我把官方文件裡的登入流程貼出來⬇️
思路確定後，開始嘗試coding(以下程式碼不建議看完)
/* 以下为Page对象的方法 */
getNearby: function() {
// 判断是否已认证，可采用wx.checkSession()方案
if (isAuth) {
// TODO: 获取业务数据
return
}
// wx.login获取code
wx.login({
success(res) {
if (res.code) {
// 获取自定义登录态
wx.request({
url,
method,
headers,
data,
success(res) {
// 请求成功
if (res.statuCode === 200) {
// 读取响应体中的自定义登录态
let token = res.data.token
// 保存自定义登录态
wx.setStorageSync("assess_token", token)
// 获取位置信息
wx.getLocation({
success(res) {
let { latitude, longitude } = res
// 请求业务数据
wx.request({
url,
method,
header,
data: { latitude, longitude },
success(res) {
// 请求成功
if (res.statuCode === 200) {
let data = res.data
// 数据渲染到V层
this.setData({ list: data })
}
// 请求失败
else if (res.statuCode === 400) {
// TODO
}
// 其他错误情况状态码处理
// TODO
},
fail(err) {
// 调用失败处理
}
})
},
fail(err) {
// 调用失败处理
}
})
}
// 请求失败
else if (res.statuCode == 400) {
// TODO
}
// 其他错误情况的状态码处理
},
fail(err) {
// 调用失败处理
}
})
}
else {
// TODO
// 登录失败
}
},
fail(err) {
// wx.login()调用失败处理
// TODO: ...
}
})
}回呼地獄出現了。氣功波代碼，別說別人，連自己看都會覺得噁心。
某天英明的產品經理站了出來，說我們可以加點XXXXX，你可能還得找個地方嵌套其他微信接口或者多加幾個if else分支，到時候就找個地方哭吧。
解決方案
從某種意義上來說，當今風暴式的前端生態，仰仗於Node以及ES6 的出現。
ES6後對於非同步有多種解決方案。一種是採用generator/yield，但generator函數使用起來其實比較麻煩。另外一種是採用Promise，相對比較簡單。 ES7也可以採用async/await，但本質上async/await也是基於Promise。以下介紹Promise。
Promise
Promise建立
建立Promise很簡單，Promise本身就是一個建構子。透過new創建。建構函數的參數為一個回呼函數，回呼函數有兩個參數為resolve和reject(無需手動維護)。 resolve和reject是用來改變狀態。關於狀態放到後邊講。
// Promise实例的创建
let p = new Promise((resolve, reject) => {
// TODO
})Promise有個缺點，一旦創建便會立刻執行。所以一般會用一個函數來包裝。
let getPromise = () => {
return new Promise((resolve, reject) => {
// TODO
})
}Promise狀態
Promise實例有三種狀態，pending、resolved和rejected，Promise實例建立後就會處於pending狀態。回呼函數中的resolve和reject就是用來改變Promise實例狀態的。當呼叫resolve時，Promise實例會從pending變成resolved狀態，表示成功。當呼叫reject時，Promise實例會從pending變成rejected狀態，表示失敗。
let getPromise = () => {
return new Promise((resolve, reject) => {
// TODO
// 处理结果
if (result) {
resolve(successObject)
}
else {
reject(error)
}
})
}常用方法
最常用的方法為then()和catch()這兩個方法，透過then()的傳遞效用就可以解決回調地獄的問題。
其中then()可接收兩個參數，都是回呼函數，第一個回呼函數用來處理resolved狀態，參數為Promise 實例呼叫resolve傳遞的成功物件。第二回呼函數用來處理rejected狀態，參數為呼叫Promise實例呼叫reject傳遞的錯誤物件。
實際中then()我們一般只用來處理resolved的情況，也就是只傳遞第一個回呼函數。對於rejected情況較多是採用catch()統一處理。
let getPromise = () => {
return new Promise((resolve, reject) => {
// TODO
// 处理结果
if (result) {
resolve(successObject)
}
else {
reject(error)
}
})
}
getPromise()
.then(res => {
console.log(res)
// TODO
})
.catch(err => {
//TODO
})使用then()方法可以繼續返回一個Promise對象，透過return一個新的Promise，可以持續的向下傳遞。
getPromise()
.then(res => { //第一层Promise
console.log(res)
// TODO
return getPromise()
)
.then(res => { // 第二层Promise
console.log(res)
// TODO
})
.catch(err => {
// TODO
})其他常用方法有諸如Promise.all()，Promise.race()。當需要等待多個Promise結果時會採用。兩個方法都是接收一個由Promise組成的物件陣列。使用Promise.all()時，只有當全部的Promise物件全部resolved Promise.all()狀態才是resolved#。而Promise.race()只需有一個Promise物件為resolved時，其狀態就為resolved。
更多方法可閱讀相關文件。
封裝小程式介面
學習了Promise基礎，透過封裝非同步操作，使用Promise鏈就可以解決回呼地獄問題。
因為wx.request()使用頻率比較高，先對wx.request()封裝。
/* 可以将公用的方法挂在app.js中 */
request: function(method, url, header, data) {
return new Promise((resolve, reject) => {
wx.request({
method,
url,
header,
data,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}基本框架就这样，我们可以进一步修改，比如请求url的基础路径，添加一些公用的header，针对状态码做一些全局处理等。
request: function(method, url, header = {}, data = {}) {
// 启动时可将storage中的令牌挂到app.js
let token = app.assess_token
if (token) {
header["Authorization"] = token
}
return new Promise((resolve, reject) => {
wx.request({
method,
url: "https://api.domain.com/v1" + url,
header,
data,
success(res) {
// 请求成功
if (res.statusCode === 200) {
resolve(res)
}
// 请求成功无响应体
else if (res.statusCode === 204) {
/*
可做一些成功提示，
如调用wx.showToast()、wx.showModal()或自定义弹出层等
*/
resolve(res)
}
// 未认证
else if (res.statusCode === 401) {
/* 可做一些错误提示，或者直接跳转至登录页面等 */
reject(res)
}
else if (res.statusCode == 400) {
/* 可做一些错误提示*/
reject(res)
}
else if (res.statuCode === 403) {
/* 无权限错误提示*/
reject(res)
}
// ...其他状态码处理
},
fail(err) {
/* 可做一些全局错误提示，如网络错误等 */
reject(err)
}
})
})
}封装之后，举个例子，发送请求就可以修改为
/* 方法体中 */
let app = getApp()
app.request("POST", "/auth", {}, { username, password })
.then(res => { // 第一层请求
// TODO 成功处理
return app.request("GET", "/goods", {}, {})
})
.then(res => { // 第二层请求
// TODO 成功处理
// 渲染视图
})
.catch(err => {
// TODO 错误处理
})封装一下其他的微信接口
/* 可以将公用的方法挂在app.js中 */
wxLogin: function() {
return new Promise((resovle, reject) => {
wx.login({
success(res) {
if (res.code) {
resovle(res)
}
else {
reject({ message: "登录失败" })
}
},
fail(err) {
reject(err)
}
})
})
}
getLocation: function() {
return new Promise((resolve, reject) => {
wx.getLocation({
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}对于最初的例子，可以就修改为
/* Page对象的方法 */
getNearby: function() {
// 判断是否已认证，可采用wx.checkSession()方案
if (isAuth) {
// TODO: 获取业务数据
return
}
app.wxLogin()
.then(res => {
// 将code发送给开发者服务器，获取自定义登录态
return app.request("POST", "/auth", {}, { code, res.code })
})
.then(res => {
// 保存自定义登录态
setStorage("access_token", res.data.access_token)
// TODO: 其他登录成功操作...
return app.getLocation()
})
.then(({ latitude, longitude }) => {
let url = "/nearby?latitude=" + latitude + "&longitude=" + longitude
return app.request("GET", url)
})
.then(res => {
// TODO: 数据处理
let data = res.data
// 渲染视图层
this.setData({ data })
})
.catch(err => {
// TODO 错误处理
})
}之后若有需添加新的请求或者其他异步操作，直接在Promise链上操作就行了。
推荐教程：《微信小程序》
以上是Promise實務 實作微信小程式介面封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！