博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
让小程序支持async-await
阅读量:5952 次
发布时间:2019-06-19

本文共 3436 字,大约阅读时间需要 11 分钟。

async-await是ES7的语法,截止我写这篇文章为止,小程序还是不支持async-await语法的,所以需要使用这个库

  1. 下载,并把regenerator-runtime文件夹放到utils目录下

图片描述

  1. 在util.js引入import regeneratorRuntime from './regenerator-runtime/runtime-module'
  2. 封装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的支持,轻松搞定异步等待的问题

更多开发总结

转载地址:http://dioxx.baihongyu.com/

你可能感兴趣的文章
PHP CURL并发,多线程
查看>>
ES 概念及动态索引结构和索引更新机制
查看>>
iOS 开发百问(2)
查看>>
MySQL for Mac 安装和基本操作(包含后期的环境变量设置)
查看>>
Linux及windows下常见压缩程序的压缩能力对比
查看>>
JAVAEE-junit测试hibernate里的方法(hibernate交给spring管理)的问题
查看>>
MOTO MB860 国行2.3.5优化增强ROM_Top_T5_end(经典收藏版)
查看>>
C#学习经典(二)---MVC框架(Model view Controller)
查看>>
log4j配置文件说明
查看>>
Maven: 为Compiler插件设置source和target版本
查看>>
linux下永久添加静态路由
查看>>
android 全局变量和局部变量命名规则
查看>>
Ubuntu Sub-process /usr/bin/dpkg
查看>>
详解DNS的常用记录(下):DNS系列之三
查看>>
linux的日志服务器关于屏蔽一些关键字的方法
查看>>
事情的两面性
查看>>
只要会营销,shi都能卖出去?
查看>>
sed单行处理命令奇偶行输出
查看>>
走向DBA[MSSQL篇] 从SQL语句的角度 提高数据库的访问性能
查看>>
VC++深入详解学习笔记1
查看>>