Comment faire en sorte que l'applet WeChat prenne en charge l'attente asynchrone ?

L'applet WeChat utilise l'attente asynchrone

L'applet WeChat ne prend pas en charge l'asynchrone et il est trop inconfortable d'écrire du code
Divers rappels provoqueront le problème de l'enfer des rappels. Les fonctions de rappel sont superposées, ce qui en fait. difficile à coder Lecture, le problème qui est difficile à maintenir plus tard

Solution :

Utilisez 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整理，贴出来供大家使用~

regenerator-runtime est le module régénérateur de Facebook

Après la fonction générateur, les fonctions async et wait sont compilés par Babel, le régénérateur. Le module -runtime est utilisé pour assurer l'implémentation des fonctions.

Introduire packages/regenerator-runtime/runtime.js dans facebook/regenerator

Étape 1 Importer et s'inscrire

Parce qu'il est utilisé globalement, tous sont introduits dans app.js et enregistrés dans le global object.🎜🎜app.js🎜

import wxp from './lib/wxp'

App({
    ...

    wxp,

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

    ...
})

🎜Étape 2 Encapsuler la requête🎜🎜request.js🎜rrreee🎜Étape 3 Utiliser l'attente asynchrone🎜🎜telle que : 🎜rrreee🎜 Le L'API native du mini programme utilise une attente asynchrone🎜🎜Il n'est pas nécessaire d'écrire divers rappels de réussite, d'échec et autres. Le code est beaucoup plus clair et plus lisible.🎜🎜Étape 1 Encapsulez l'API native à l'aide de Promise🎜🎜wxp.js🎜. rrreee🎜Ce qui précède est l'arrangement API de base du mini programme, publié ici pour que tout le monde puisse l'utiliser~🎜🎜Étape 2 Utiliser 🎜rrreee🎜🎜Recommandations d'apprentissage associées : 🎜Tutoriel de développement de mini programme🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!