让小程序支持async-await

taoszu 发布于2019-08-22 18:50 / 2956人阅读

摘要：是的语法，截止我写这篇文章为止，小程序还是不支持语法的，所以需要使用这个库下载，并把文件夹放到目录下在引入封装，让微信的支持语法所有的请求，默认携带可以控制是否显示加载状态加载中封装好后就可以在文件中使用了，使用方法如下请

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

下载regenerator，并把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的支持，轻松搞定异步等待的问题

更多开发总结移步于此

GPU云服务器云服务器 async-await 小程序webrtc支持小程序支持webrtc 小程序支持webrtc吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96274.html

ES6系列文章异步神器async-await

摘要：有两个陌生的关键字，同时函数执行结果似乎返回了一个对象。用来表示函数是异步的，定义的函数会返回一个对象，可以使用方法添加回调函数。如果的是对象会造成异步函数停止执行并且等待的解决如果等的是正常的表达式则立即执行。视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-a...

miqt 2019-08-21 17:00 评论0 收藏0
JVM并发编程模型览

摘要：本文介绍和点评上的等并发编程模型。异步更适合并发编程。同步使线程阻塞，导致等待。基本模型这是最简单的模型，创建线程来执行一个任务，完毕后销毁线程。响应式编程是一种面向数据流和变化传播的编程模式。起源于电信领域的的编程模型。本文介绍和点评JVM上的Thread, Thread Pool, Future, Rx, async-await, Fiber, Actor等并发编程模型。本人经验...

cppowboy 2019-06-24 17:51 评论0 收藏0
JVM并发编程模型览

摘要：本文介绍和点评上的等并发编程模型。异步更适合并发编程。同步使线程阻塞，导致等待。基本模型这是最简单的模型，创建线程来执行一个任务，完毕后销毁线程。响应式编程是一种面向数据流和变化传播的编程模式。起源于电信领域的的编程模型。本文介绍和点评JVM上的Thread, Thread Pool, Future, Rx, async-await, Fiber, Actor等并发编程模型。本人经验...

wudengzan 2019-08-14 16:49 评论0 收藏0
记一次小程序开发中如何使用async-await并封装公共异步请求

摘要：实现方案首先小程序目前还是不支持的和的，那么如何让它支持呢点击下载，并把下载好的文件夹放到自己小程序的目录下，包总共才多，体积很小的。如果想使用这些新的对象和方法，必须使用，为当前环境提供一个垫片。用于实现浏览器并不支持的原生的代码。前言在平常的项目开发中肯定会遇到同步异步执行的问题，还有的就是当执行某一个操作依赖上一个执行所返回的结果，那么这个时候你会如何解决这个问题呢； 1.是...

why_rookie 2019-08-23 14:49 评论0 收藏0
小程序开发技巧总结

摘要：前言最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了开发，突然去开发小程序，感觉很鸡肋。前言最近公司要开发一款电商小程序，匆忙看了一遍文档就开始干活了。整体开发体验个人感觉不太好，特别是如果之前习惯了Vue开发，突然去开发小程序，感觉很鸡肋。以下是我在开发中遇到的一些问题以及解决方法的总结，仅供参考引入iconfont ...

Wuv1Up 2019-08-22 18:48 评论0 收藏0