小程序异步数据处理，使用async/await

小程序异步数据处理的方式有很多种，我这里使用了async 异步函数来解决，以前也用过递归的方式来处理异步数据，但递归的方式有局限性。

一、async/await 异步函数包安装
1、小程序自身暂不支持 async 异步函数，需要引入外部依赖。
gitHub上面下载包：https://github.com/zarknight/owx

image

我这里把lib 文件夹里面的regenerator文件夹直接复制到了自己utils文件夹里面require引用进来，这里注意声明变量名称必须是regeneratorRuntime 。

2、异步函数的使用

 let app = getApp();
 const regeneratorRuntime = require('../../../utils/regenerator/runtime-module');//async异步函数依赖包
 async function uploadImgs () {//上传图片
   for (let i = 0; i < arr.length; i++) {
     try {//抓取reject()错误
       let resulte = await uploadImg(arr[i]);
     }catch (err) {
       console.log('err', err);
     }
   }
 }

 function uploadImg (file) {//上传单个图片
   return new Promise((resolve, reject) => {
     wx.uploadFile({
       url: app.globalData.newUrl + '/API/File/Upload/' + app.globalData.token,
       filePath: file,
       name: 'test',
       success(res) {
         if (res.statusCode == 200) {
           resolve(res.data);
         } else {
           reject(res.data);//抛出错误
           console.log("err", res.data);
         }
       },
       fail(err) {
         reject(err);
         console.log("err", err);
       }
     })
   })
 }

   uploadImgs(arr);

如果不懂async异步函数，可以先看大神(阮一峰)的教程：http://es6.ruanyifeng.com/#docs/async

二、递归处理异步数据

    let app = getApp();
    let arr = ['/images/1.png', '/images/2.png', '/images/3.png', '/images/4.png'];
    let index = 0;
    function uploadImgs (arr, index = 0) {//上传图片方法
      wx.uploadFile({
        url: app.globalData.newUrl + '/API/File/Upload/' + app.globalData.token ,
        filePath: arr[index],
        name: 'test',
        success (res) {
          if (res.statusCode == 200) {
            index++;
            if (arr.length == index) {//图片已上传完
              return;
            }
            uploadImgs(arr, index);//上传下一个图片
          } else {
            console.log("err", res.data);
          }
        },
        fail (err) {
          console.log("err", err);
        }
      })
    }

    uploadImgs(arr, index);

这里主要的还是等待异步回调success 的结果再 调用方法自身，接着再处理arr的下一个数据。直到index == arr.length 停止递归。

这种方法有很大的局限性，如果在上传成功后要做数据处理，再上传下一个文件，这里的代码就复杂了，代码可读性也不佳。

以上就是小程序内使用异步函数方式和优势，如果哪位朋友有更好的方法和见解，欢迎留言指点。