温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-09-24 11:47:00 阅读:217 作者:柒染 栏目:移动开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇文章为大家展示了如何使微信小程序支持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({
                                titleJSON.stringify(err),
                                icon'none',
                                duration10000
                            })
                        }
                    }
                })
            } catch (err) {
                wx.showToast({ title: err.messageicon'none' })
            }
        })
    }

    get(url, data) {
        return this.request({ url, methodMETHOD.GET, data })
    }

    post(url, data) {
        return this.request({ url, methodMETHOD.POST, data })
    }

    put(url, data) {
        return this.request({ url, methodMETHOD.PUT, data })
    }

    delete(url, data) {
        return this.request({ url, methodMETHOD.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 {
    // 界面交互
    showToastwxPromise(wx.showToast),
    showLoadingwxPromise(wx.showLoading),
    showModalwxPromise(wx.showModal),
    showActionSheetwxPromise(wx.showActionSheet),
    // 导航条
    setNavigationBarTitlewxPromise(wx.setNavigationBarTitle),
    setNavigationBarColorwxPromise(wx.setNavigationBarColor),
    setTopBarTextwxPromise(wx.setTopBarText),
    // 导航
    navigateTowxPromise(wx.navigateTo),
    redirectTowxPromise(wx.redirectTo),
    switchTabwxPromise(wx.switchTab),
    reLaunchwxPromise(wx.reLaunch),

    // 用户相关
    loginwxPromise(wx.login),
    checkSessionwxPromise(wx.checkSession),
    authorizewxPromise(wx.authorize),
    getUserInfowxPromise(wx.getUserInfo),

    // 支付
    requestPaymentwxPromise(wx.requestPayment),

    // 图片
    chooseImagewxPromise(wx.chooseImage),
    previewImagewxPromise(wx.previewImage),
    getImageInfowxPromise(wx.getImageInfo),
    saveImageToPhotosAlbumwxPromise(wx.saveImageToPhotosAlbum),

    // 文件
    uploadFilewxPromise(wx.uploadFile),
    downloadFilewxPromise(wx.downloadFile),

    // 录音
    startRecordwxPromise(wx.startRecord),

    // 音频播放
    playVoicewxPromise(wx.playVoice),

    // 音乐播放
    getBackgroundAudioPlayerStatewxPromise(wx.getBackgroundAudioPlayerState),
    playBackgroundAudiowxPromise(wx.playBackgroundAudio),
    seekBackgroundAudiowxPromise(wx.seekBackgroundAudio),

    // 视频
    chooseVideowxPromise(wx.chooseVideo),
    saveVideoToPhotosAlbumwxPromise(wx.saveVideoToPhotosAlbum),

    // 文件
    saveFilewxPromise(wx.saveFile),
    getFileInfowxPromise(wx.getFileInfo),
    getSavedFileListwxPromise(wx.getSavedFileList),
    getSavedFileInfowxPromise(wx.getSavedFileInfo),
    removeSavedFilewxPromise(wx.removeSavedFile),
    openDocumentwxPromise(wx.openDocument),

    // 数据缓存
    setStoragewxPromise(wx.setStorage),
    getStoragewxPromise(wx.getStorage),
    getStorageInfowxPromise(wx.getStorageInfo),
    removeStoragewxPromise(wx.removeStorage),

    // 位置
    getLocationwxPromise(wx.getLocation),
    chooseLocationwxPromise(wx.chooseLocation),
    openLocationwxPromise(wx.openLocation),

    // 设备
    getSystemInfowxPromise(wx.getSystemInfo),
    getNetworkTypewxPromise(wx.getNetworkType),
    startAccelerometerwxPromise(wx.startAccelerometer),
    stopAccelerometerwxPromise(wx.stopAccelerometer),
    startCompasswxPromise(wx.startCompass),
    stopCompasswxPromise(wx.stopCompass),
    // 打电话
    makePhoneCallwxPromise(wx.makePhoneCall),
    // 扫码
    scanCodewxPromise(wx.scanCode),
    // 剪切板
    setClipboardDatawxPromise(wx.setClipboardData),
    getClipboardDatawxPromise(wx.getClipboardData),
    // 蓝牙
    openBluetoothAdapterwxPromise(wx.openBluetoothAdapter),
    closeBluetoothAdapterwxPromise(wx.closeBluetoothAdapter),
    getBluetoothAdapterStatewxPromise(wx.getBluetoothAdapterState),
    startBluetoothDevicesDiscoverywxPromise(wx.startBluetoothDevicesDiscovery),
    stopBluetoothDevicesDiscoverywxPromise(wx.stopBluetoothDevicesDiscovery),
    getBluetoothDeviceswxPromise(wx.getBluetoothDevices),
    getConnectedBluetoothDeviceswxPromise(wx.getConnectedBluetoothDevices),
    createBLEConnectionwxPromise(wx.createBLEConnection),
    closeBLEConnectionwxPromise(wx.closeBLEConnection),
    getBLEDeviceServiceswxPromise(wx.getBLEDeviceServices),
    // iBeacon
    startBeaconDiscoverywxPromise(wx.startBeaconDiscovery),
    stopBeaconDiscoverywxPromise(wx.stopBeaconDiscovery),
    getBeaconswxPromise(wx.getBeacons),
    // 屏幕亮度
    setScreenBrightnesswxPromise(wx.setScreenBrightness),
    getScreenBrightnesswxPromise(wx.getScreenBrightness),
    setKeepScreenOnwxPromise(wx.setKeepScreenOn),
    // 振动
    vibrateLongwxPromise(wx.vibrateLong),
    vibrateShortwxPromise(wx.vibrateShort),
    // 联系人
    addPhoneContactwxPromise(wx.addPhoneContact),
    // NFC
    getHCEStatewxPromise(wx.getHCEState),
    startHCEwxPromise(wx.startHCE),
    stopHCEwxPromise(wx.stopHCE),
    sendHCEMessagewxPromise(wx.sendHCEMessage),
    // Wi-Fi
    startWifiwxPromise(wx.startWifi),
    stopWifiwxPromise(wx.stopWifi),
    connectWifiwxPromise(wx.connectWifi),
    getWifiListwxPromise(wx.getWifiList),
    setWifiListwxPromise(wx.setWifiList),
    getConnectedWifiwxPromise(wx.getConnectedWifi),

    // 第三方平台
    getExtConfigwxPromise(wx.getExtConfig),

    // 转发
    showShareMenuwxPromise(wx.showShareMenu),
    hideShareMenuwxPromise(wx.hideShareMenu),
    updateShareMenuwxPromise(wx.updateShareMenu),
    getShareInfowxPromise(wx.getShareInfo),

    // 收货地址
    chooseAddresswxPromise(wx.chooseAddress),

    // 卡券
    addCardwxPromise(wx.addCard),
    openCardwxPromise(wx.openCard),

    // 设置
    openSettingwxPromise(wx.openSetting),
    getSettingwxPromise(wx.getSetting),

    // 微信运动
    getWeRunDatawxPromise(wx.getWeRunData),

    // 打开小程序
    navigateToMiniProgramwxPromise(wx.navigateToMiniProgram),
    navigateBackMiniProgramwxPromise(wx.navigateBackMiniProgram),

    // 获取发票抬头
    chooseInvoiceTitlewxPromise(wx.chooseInvoiceTitle),

    // 生物认证
    checkIsSupportSoterAuthenticationwxPromise(wx.checkIsSupportSoterAuthentication),
    startSoterAuthenticationwxPromise(wx.startSoterAuthentication),
    checkIsSoterEnrolledInDevicewxPromise(wx.checkIsSoterEnrolledInDevice)
}

以上为小程序基本的api整理,贴出来供大家使用~

步骤2 使用
import wxp from './lib/wxp'

App({
    ...

    wxp,

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

    ...
})

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

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×