WeChat applet does not support async, and it is too uncomfortable to write code.
Various callbacks will cause callback hell problems, callback letters There are layers within layers, making the code difficult to read and difficult to maintain later.
Solution:
Useregenerator-runtime
regenerator- runtime is facebook's regenerator module
After the generator function, async, and await functions are compiled by babel, the regenerator-runtime module is used to provide function implementation.
Introduce packages/regenerator-runtime/runtime.js in facebook/regenerator
Step 1 Import and register
Because it is used globally, all in Introduce it into app.js and register it in the global object.
app.js
import regeneratorRuntime from './lib/runtime'
App({
...
regeneratorRuntime,
onLaunch(){},
onShow() {},
onHide() {},
...
})
Step 2 Encapsulate 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 }
Step 3 Use async await
For example:
import { request, setBaseUrl, addDefaultInterceptor } from './lib/request'
addDefaultInterceptor()
App({
...
async onLaunch() {
const userInfo = await request.get('/user/info')
console.log(userInfo)
}
...
})
The native api of the mini program uses async await
No need to write each Success, fail, etc. callbacks are implemented, and the code is much clearer and more readable.
Step 1 Encapsulate the native api and use 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)
}
The above is the basic api arrangement of the mini program, posted for everyone to use~
Step 2 Use
import wxp from './lib/wxp'
App({
...
wxp,
async onLaunch() {
const res = await wxp.getSystemInfo()
console.log(res)
}
...
})