微信小程序> 微信小程序兼容async/await方案

微信小程序兼容async/await方案

浏览量:2099 时间: 来源:huangpb0624

要使用 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的支持,轻松搞定异步等待的问题。

 

参考文章:https://segmentfault.com/a/1190000015691620

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎