How to make WeChat applet support async await?-Mini Program Development-php.cn

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() {},

    ...
})

Copy after login

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 }

Copy after login

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)
    }

    ...
})

Copy after login

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)
}

Copy after login

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)
    }

    ...
})

Copy after login

The above is the detailed content of How to make WeChat applet support async await?. For more information, please follow other related articles on the PHP Chinese website!