uniapp 队列下载

为什么要做这个功能呢

1. 车辆列表图片过大，如果每次进入都重新加载的话用户体验就太不爽了，所以我采用了浏览过的图片就都缓存下来，下次进入，缓存过的图片直接去拿手机上的图片就好了，这样用户体验就比较好了（借鉴的微信朋友圈）
2. 如果同时下载多个图片的话，会导致页面初次渲染卡到爆，所以采用队列下载，也就是下载完一个再下载一个，这样的话不会太影响用户的首次体验，本想用webWorker，但是uniapp App 端并不支持，这导致我目前最优的方式就是队列下载

3. 缓存下对应车辆的旧的图片，如果新的图片和旧的图片不完全相等时则重新加载新的图片，保证图片的时时更新

   
   
   uniapp webWorker

// 队列下载
class Queue {
  constructor(item) {
    this.arr = [];
  }
  add (item) {
    this.arr.push(item);
    this.download();
  }
  download () {
    const { name, url, isDownload } = this.arr[0];
    if (!isDownload) {
      // 本地没有缓存 需要下载   
      uni.downloadFile({
        url,
        success: res => {
          if (res.statusCode === 200) {
            uni.setStorage({
              key: name,
              data: { target: res.tempFilePath, oldUrl: url },
              success: _ => {
                console.log('图片缓存成功');
                let files = uni.getStorageSync('files') || [];
                files.push(res.tempFilePath);
                uni.setStorageSync('files', files);
                this.arr.shift();
                this.download();
              },
              fail: err => {
                console.error('图片缓存失败，原因：', err);
              }
            })
          }
        },
        fail: err => {
          console.error('图片下载失败，原因：', err);
          this.arr.shift();
          this.download();
        }
      });
    } else return this.download();
  }
}
let queue = new Queue();
/**
 * 获取图片，若无效，则下载后写入缓存
 * @param {String} name 
 * @param {String} url 
 * @returns {String}
 */
function getImgUrl (name, url) {
  const { target = null, oldUrl = null } = uni.getStorageSync(name);
  if (!target || !oldUrl || url !== oldUrl) {
    queue.add({ name, url, isDownload: false });
    return url;
  } else return target;
}

export default getImgUrl;