微信小程序 使用async await

微信小程序并不支持async，写起代码来太不舒服了.
各种回调会造成回调地狱的问题，回调函数一层套着一层，代码难以阅读，后期难以维护的问题

解决办法：

使用regenerator-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) => wxPromise(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整理，贴出来供大家使用~

步骤2 使用

import wxp from './lib/wxp'

App({
    ...

    wxp,

    async onLaunch() {
        const res = await wxp.getSystemInfo()
        console.log(res)
    }

    ...
})

作者：0_1
链接：https://juejin.im/post/5d36da4f51882557af272231
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

来源：oschina

链接：https://my.oschina.net/u/4262068/blog/3270037