要使用 ES7 的 async / await 的话,只靠微信开发者工具中的 Babel 转换工具是不够的,它还需要额外的 Babel 插件来编译 async / await 代码,这里我们可以做如下配置。
配置步骤如下:
1. 引入 regenerator 包
在自己的测试项目下 npm install --save-dev regenerator,
然后把 node_modules 下的整个 regenerator-runtime 文件夹拷贝到项目的 packages 目录(整个目录可以自己定)下。
2. 引入代码
在需要用到 async / await 特性的文件中,引入 regenerator 库。
import regeneratorRuntime from '../../packages/regenerator-runtime/runtime-module';
然后可以放心的在代码中使用 async / await 进行异步处理了。
3. 封装wxRequest,让微信的wx.request API支持async-await语法
// 项目域名
const host = 'https://shouyin.xxx.com';
const wxRequest = async (url, params = {}) => {
Object.assign(params, {
token: wx.getStorageSync('token')
})
// 所有的请求,header默认携带token
let header = params.header || {
'Content-Type': 'application/json',
'token': params.token || ''
}
let data = params.data || {}
let method = params.method || 'GET'
// hideLoading可以控制是否显示加载状态
if (!params.hideLoading) {
wx.showLoading({
title: '加载中...',
})
}
let res = await new Promise((resolve, reject) => {
wx.request({
url: host + url,
method,
data,
header,
success: (res) => {
if (res && res.statusCode == 200) {
resolve(res.data)
} else {
reject(res)
}
},
fail: (err) => {
reject(err)
},
complete: (e) => {
wx.hideLoading()
}
})
})
return res
}
export {
wxRequest
}
封装好后就可以在js文件中使用了,使用方法如下:
import regeneratorRuntime from '../../packages/regenerator-runtime/runtime-module.js'
import {
wxRequest
} from '../../utils/util.js'
Page({
data: {
list:[],
count: 0,
page: 1,
limit: 10
},
onLoad: function() {
this.getList()
// 请求已经结束 做其他事
},
getList: async function() {
await wxRequest('/test',{
hideLoading: true,
data: {
limit: this.data.limit,
page: this.data.page
}
}).then((ret) => {
this.setData({
list: ret.data.data,
count: ret.data.num
})
})
}
})
封装带来的最大的好处是扩展方便,支持了async/await语法后,任何异步操作API都可以像同步一样执行,比如说多图上传,图片都上传成功后后端会返回新的图片地址,现在可以这么做:
任务:小程序上传图片到服务器,最多上传三张,前端可以删除图片
使用到的API有两个:wx.uploadFile wx.chooseImage
imgList是wx.chooseImage成功后返回的图片临时地址
Page({
data: {
imgList:[]
},
onSub: async function() {
// 点击提交后,开始上传图片
let imgUrls = []
for (let index = 0; index < this.data.imgList.length; index++) {
await this.uploadFile(this.data.imgList[index]).then((res) => {
// 这里要注意把res.data parse一下,默认是字符串
let parseData = JSON.parse(res.data)
imgUrls.push(parseData.data) // 图片地址
})
}
},
uploadFile: function (filePath) {
// 返回Promise是为了解决图片上传的异步问题
return new Promise( (resolve, reject) => {
wx.uploadFile({
url: app.globalData.baseUrl + '/file/upload', // 上传地址
filePath: filePath,
name: 'file', // 这里的具体值,问后端人员
formData: {},
header: {
"Content-Type": "multipart/form-data"
},
success: (res) =>{
resolve(res.data)
},
fail:(err) => {
reject(err)
}
})
})
}
})
wx.uploadFile()是异步执行的,但是有了async-await的支持,轻松搞定异步等待的问题。