WeChat アプレットで非同期待機をサポートするようにするにはどうすればよいですか?-ミニプログラム開発-php.cn

WeChat アプレットで非同期待機をサポートするようにするにはどうすればよいですか?

藏色散人

リリース： 2021-09-25 17:14:15

転載

3960 人が閲覧しました

WeChat アプレットは非同期をサポートしていないため、コードを書くのは非常に不快です
さまざまなコールバックはコールバック地獄の問題を引き起こします、コールバック文字の中にレイヤーがあります

#解決策:

使用

regenerator-runtime

regenerator-runtime は Facebook の regenerator です。 module

generator 関数、async、および await 関数が babel によってコンパイルされた後、regenerator-runtime モジュールを使用して関数が実装されます。

packages/regenerator-runtime/runtime.js を facebook/regenerator に導入します

ステップ 1 インポートして登録します

グローバルで使用されるため、すべてを

導入しますapp.js に追加し、グローバルオブジェクトに登録します。

app.js

import regeneratorRuntime from './lib/runtime'

App({
    ...

    regeneratorRuntime,

    onLaunch(){},

    onShow() {},

    onHide() {},

    ...
})

ログイン後にコピー

ステップ 2 リクエストをカプセル化します

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

を使用します。成功、失敗などの各コールバックを記述する必要はありません。コードはより明確で読みやすくなっています。

ステップ 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)
    }

    ...
})

ログイン後にコピー