如何使微信小程序支持async await

本篇文章为大家展示了如何使微信小程序支持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) => 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整理，贴出来供大家使用~

步骤2 使用

import wxp from './lib/wxp'App({    ...    wxp,    async onLaunch() {        const res = await wxp.getSystemInfo()        console.log(res)    }    ...})

上述内容就是如何使微信小程序支持async await，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。