如何使微信小程序支持asyncawait
本篇文章为大家展示了如何使微信小程序支持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，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
文章名称：如何使微信小程序支持asyncawait
转载来源：http://shouzuofang.com/article/jhijcg.html