美文网首页
小程序异步数据处理,使用async/await

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

作者: 前端里程 | 来源:发表于2019-04-18 13:11 被阅读0次

    小程序异步数据处理的方式有很多种,我这里使用了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 停止递归。

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

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

    相关文章

      网友评论

          本文标题:小程序异步数据处理,使用async/await

          本文链接:https://www.haomeiwen.com/subject/cobzwqtx.html