async-await是ES7的语法,截止我写这篇文章为止,小程序还是不支持async-await语法的,所以需要使用这个库
- 下载,并把regenerator-runtime文件夹放到utils目录下
- 在util.js引入
import regeneratorRuntime from './regenerator-runtime/runtime-module'
- 封装wxRequest,让微信的wx.request API支持async-await语法
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: url, method: method, data: data, header: 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 '../../utils/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(app.globalData.baseUrl + '/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
示例WXML:
imgList是wx.chooseImage成功后返回的图片临时地址
示例JS
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) // 图片地址 }) } console.log(imgUrls) // 3张图片上传成功后,执行其他操作 }, // 删除某张图片 clearImg: function (params) { let imgList = this.data.imgList let id = params.currentTarget.dataset.id // 图片索引 imgList.splice(id, 1) // 删除 this.setData({ imgList: imgList }) }, chooseImage: function (params) { wx.chooseImage({ count: 3, // 做多3张 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { // 存储临时地址 this.setData({ imgList: res.tempFilePaths }) } }) }, 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的支持,轻松搞定异步等待的问题
更多开发总结