小程序异步数据处理的方式有很多种,我这里使用了async 异步函数来解决,以前也用过递归的方式来处理异步数据,但递归的方式有局限性。
一、async/await 异步函数包安装 1、小程序自身暂不支持 async 异步函数,需要引入外部依赖。 gitHub上面下载包:github.com/zarknight/o…

我这里把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异步函数,可以先看大神(阮一峰)的教程: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 停止递归。
这种方法有很大的局限性,如果在上传成功后要做数据处理,再上传下一个文件,这里的代码就复杂了,代码可读性也不佳。
以上就是小程序内使用异步函数方式和优势,如果哪位朋友有更好的方法和见解,欢迎留言指点。