Das WeChat-Applet unterstützt kein Async und es ist zu umständlich, Code zu schreiben.
Verschiedene Rückrufe verursachen das Problem der Rückrufhölle schwer zu codieren Lesen, das Problem ist später schwer zu warten
Lösung:
Verwenden Sie regenerator-runtimeregenerator-runtime
regenerator-runtime是facebook的regenerator模块
生成器函数、async、await函数经babel编译后，regenerator-runtime模块用于提供功能实现。
引入facebook/regenerator 中的packages/regenerator-runtime/runtime.js
步骤1 引入并注册
因全局都要用到，所有在app.js中引入,并注册全局对象中.
app.js
import regeneratorRuntime from './lib/runtime'
App({
...
regeneratorRuntime,
onLaunch(){},
onShow() {},
onHide() {},
...
})
步骤2 封装request
request.js
const METHOD = {
GET: 'GET',
POST: 'POST',
PUT: 'PUT',
DELETE: 'DELETE'
}
let baseUrl = ''
const interceptors = []
class Request {
/**
* response interceptor
*/
intercept(res, resolve, reject) {
return interceptors
.filter((f) => typeof f === 'function')
.every((f) => f(res, resolve, reject))
}
/**
* request
*/
request(option) {
const header = {
'content-type': 'application/x-www-form-urlencoded'
}
const { url, method, data = {} } = option
return new Promise((resolve, reject) => {
try {
wx.request({
url: baseUrl + url,
method: method || METHOD.GET,
data,
header,
success: (res) => this.intercept(res, resolve, reject),
fail: (err) => {
if (
err &&
err.errMsg &&
err.errMsg.indexOf('request:fail') !== -1
) {
console.error('wx request error: ', err)
} else {
wx.showToast({
title: JSON.stringify(err),
icon: 'none',
duration: 10000
})
}
}
})
} catch (err) {
wx.showToast({ title: err.message, icon: 'none' })
}
})
}
get(url, data) {
return this.request({ url, method: METHOD.GET, data })
}
post(url, data) {
return this.request({ url, method: METHOD.POST, data })
}
put(url, data) {
return this.request({ url, method: METHOD.PUT, data })
}
delete(url, data) {
return this.request({ url, method: METHOD.DELETE, data })
}
all(tasks) {
return Promise.all(tasks)
}
}
/**
* 设置base URL
*/
function setBaseUrl(url) {
baseUrl = url
}
/**
* 默认response拦截器
*/
function addDefaultInterceptor() {
interceptors.push((res, resolve, reject) => {
const status = res.statusCode
if (status !== 200) {
return reject(new Error(`internet error: ${status}`))
}
const body = res.data
if (body.errno !== 0) {
return reject({
message: body.error,
body
})
}
return resolve(body.data)
})
}
const request = new Request()
export { setBaseUrl, addDefaultInterceptor, request }
步骤3 使用async await
如：
import { request, setBaseUrl, addDefaultInterceptor } from './lib/request'
addDefaultInterceptor()
App({
...
async onLaunch() {
const userInfo = await request.get('/user/info')
console.log(userInfo)
}
...
})
小程序原生api使用async await
不用再写各种success、fail等回调了，代码清晰很多，易读性更强.
步骤1 封装原生api用Promise化
wxp.js
/**
* promise微信API方法
*/
function wxPromise(api) {
function func(options, ...params) {
return new Promise((resolve, reject) => {
api(
Object.assign({}, options, {
success: (res) => {
resolve(res)
},
fail: reject
}),
...params
)
})
}
return func
}
export default {
// 界面交互
showToast: wxPromise(wx.showToast),
showLoading: wxPromise(wx.showLoading),
showModal: wxPromise(wx.showModal),
showActionSheet: wxPromise(wx.showActionSheet),
// 导航条
setNavigationBarTitle: wxPromise(wx.setNavigationBarTitle),
setNavigationBarColor: wxPromise(wx.setNavigationBarColor),
setTopBarText: wxPromise(wx.setTopBarText),
// 导航
navigateTo: wxPromise(wx.navigateTo),
redirectTo: wxPromise(wx.redirectTo),
switchTab: wxPromise(wx.switchTab),
reLaunch: wxPromise(wx.reLaunch),
// 用户相关
login: wxPromise(wx.login),
checkSession: wxPromise(wx.checkSession),
authorize: wxPromise(wx.authorize),
getUserInfo: wxPromise(wx.getUserInfo),
// 支付
requestPayment: wxPromise(wx.requestPayment),
// 图片
chooseImage: wxPromise(wx.chooseImage),
previewImage: wxPromise(wx.previewImage),
getImageInfo: wxPromise(wx.getImageInfo),
saveImageToPhotosAlbum: wxPromise(wx.saveImageToPhotosAlbum),
// 文件
uploadFile: wxPromise(wx.uploadFile),
downloadFile: wxPromise(wx.downloadFile),
// 录音
startRecord: wxPromise(wx.startRecord),
// 音频播放
playVoice: wxPromise(wx.playVoice),
// 音乐播放
getBackgroundAudioPlayerState: wxPromise(wx.getBackgroundAudioPlayerState),
playBackgroundAudio: wxPromise(wx.playBackgroundAudio),
seekBackgroundAudio: wxPromise(wx.seekBackgroundAudio),
// 视频
chooseVideo: wxPromise(wx.chooseVideo),
saveVideoToPhotosAlbum: wxPromise(wx.saveVideoToPhotosAlbum),
// 文件
saveFile: wxPromise(wx.saveFile),
getFileInfo: wxPromise(wx.getFileInfo),
getSavedFileList: wxPromise(wx.getSavedFileList),
getSavedFileInfo: wxPromise(wx.getSavedFileInfo),
removeSavedFile: wxPromise(wx.removeSavedFile),
openDocument: wxPromise(wx.openDocument),
// 数据缓存
setStorage: wxPromise(wx.setStorage),
getStorage: wxPromise(wx.getStorage),
getStorageInfo: wxPromise(wx.getStorageInfo),
removeStorage: wxPromise(wx.removeStorage),
// 位置
getLocation: wxPromise(wx.getLocation),
chooseLocation: wxPromise(wx.chooseLocation),
openLocation: wxPromise(wx.openLocation),
// 设备
getSystemInfo: wxPromise(wx.getSystemInfo),
getNetworkType: wxPromise(wx.getNetworkType),
startAccelerometer: wxPromise(wx.startAccelerometer),
stopAccelerometer: wxPromise(wx.stopAccelerometer),
startCompass: wxPromise(wx.startCompass),
stopCompass: wxPromise(wx.stopCompass),
// 打电话
makePhoneCall: wxPromise(wx.makePhoneCall),
// 扫码
scanCode: wxPromise(wx.scanCode),
// 剪切板
setClipboardData: wxPromise(wx.setClipboardData),
getClipboardData: wxPromise(wx.getClipboardData),
// 蓝牙
openBluetoothAdapter: wxPromise(wx.openBluetoothAdapter),
closeBluetoothAdapter: wxPromise(wx.closeBluetoothAdapter),
getBluetoothAdapterState: wxPromise(wx.getBluetoothAdapterState),
startBluetoothDevicesDiscovery: wxPromise(wx.startBluetoothDevicesDiscovery),
stopBluetoothDevicesDiscovery: wxPromise(wx.stopBluetoothDevicesDiscovery),
getBluetoothDevices: wxPromise(wx.getBluetoothDevices),
getConnectedBluetoothDevices: wxPromise(wx.getConnectedBluetoothDevices),
createBLEConnection: wxPromise(wx.createBLEConnection),
closeBLEConnection: wxPromise(wx.closeBLEConnection),
getBLEDeviceServices: wxPromise(wx.getBLEDeviceServices),
// iBeacon
startBeaconDiscovery: wxPromise(wx.startBeaconDiscovery),
stopBeaconDiscovery: wxPromise(wx.stopBeaconDiscovery),
getBeacons: wxPromise(wx.getBeacons),
// 屏幕亮度
setScreenBrightness: wxPromise(wx.setScreenBrightness),
getScreenBrightness: wxPromise(wx.getScreenBrightness),
setKeepScreenOn: wxPromise(wx.setKeepScreenOn),
// 振动
vibrateLong: wxPromise(wx.vibrateLong),
vibrateShort: wxPromise(wx.vibrateShort),
// 联系人
addPhoneContact: wxPromise(wx.addPhoneContact),
// NFC
getHCEState: wxPromise(wx.getHCEState),
startHCE: wxPromise(wx.startHCE),
stopHCE: wxPromise(wx.stopHCE),
sendHCEMessage: wxPromise(wx.sendHCEMessage),
// Wi-Fi
startWifi: wxPromise(wx.startWifi),
stopWifi: wxPromise(wx.stopWifi),
connectWifi: wxPromise(wx.connectWifi),
getWifiList: wxPromise(wx.getWifiList),
setWifiList: wxPromise(wx.setWifiList),
getConnectedWifi: wxPromise(wx.getConnectedWifi),
// 第三方平台
getExtConfig: wxPromise(wx.getExtConfig),
// 转发
showShareMenu: wxPromise(wx.showShareMenu),
hideShareMenu: wxPromise(wx.hideShareMenu),
updateShareMenu: wxPromise(wx.updateShareMenu),
getShareInfo: wxPromise(wx.getShareInfo),
// 收货地址
chooseAddress: wxPromise(wx.chooseAddress),
// 卡券
addCard: wxPromise(wx.addCard),
openCard: wxPromise(wx.openCard),
// 设置
openSetting: wxPromise(wx.openSetting),
getSetting: wxPromise(wx.getSetting),
// 微信运动
getWeRunData: wxPromise(wx.getWeRunData),
// 打开小程序
navigateToMiniProgram: wxPromise(wx.navigateToMiniProgram),
navigateBackMiniProgram: wxPromise(wx.navigateBackMiniProgram),
// 获取发票抬头
chooseInvoiceTitle: wxPromise(wx.chooseInvoiceTitle),
// 生物认证
checkIsSupportSoterAuthentication: wxPromise(wx.checkIsSupportSoterAuthentication),
startSoterAuthentication: wxPromise(wx.startSoterAuthentication),
checkIsSoterEnrolledInDevice: wxPromise(wx.checkIsSoterEnrolledInDevice)
}
以上为小程序基本的api整理，贴出来供大家使用~