需求 :
相册功能分云端和本地, 批量下载云端数据的时候, 每完成一个, 重新获取一遍新的本地数据, 刷新本地列表.

注意点:
1.批量下载云端数据, 每一个下载耗时可能很短, 比如一个1M大小的资源, 0.5s就下载完成.
2.重新获取本地数据并且刷新, 异步执行, 耗时操作, 1s完成一次
3.多次获取本地数据的任务如果没有按序执行, 可能导致数据不同步, 或者数据错乱.

---

1.创建队列属性

  constructor(props) {
    super(props);
    // 通过队列的方式, 控制刷新, 确保数据的准确性
    this.getLocalAlbumDataQueue = [];
    this.getLocalAlbumDataQueue.active = false;
    this.targetResult = 0;
  }

2.创建添加队列任务方法

  // 需要做一个队列控制getLocalAlbumData的处理. 每次下载完之后, 需要按序重新获取数据源
  /**
   * 添加到任务队列
   */
   addToLocalAlbumDataQueue = (task) => {
     this.getLocalAlbumDataQueue.push({ task });
     if (!this.getLocalAlbumDataQueue.active) {
       this.next();
     }
   }

3.创建下一步执行方法

/**
   * 顺序执行任务
   */
  next = () => {
    if (!this.getLocalAlbumDataQueue.length) {
      this.getLocalAlbumDataQueue.active = false;
      return;
    }

    const { task } = this.getLocalAlbumDataQueue.shift();
    this.getLocalAlbumDataQueue.active = true;
    task().then(() => {
      console.log('执行完成');
      console.log('!!!!!!!!!!!!!!!!! this.targetResult : ', this.targetResult);
      this.next();
    }).catch((err) => {
      console.log('执行失败 : ', err);
    });
  }

4.创建Promise任务方法

  funcPromiseTask =() => {
    const task = new Promise((resolve, reject) => {
      if (this.targetResult === -1) {
        reject();
      }
      this.targetResult += 1;
      resolve();
    });
    return task;
  }

---

---

测试 : 多个异步耗时任务执行

  funcTest = () => {
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    this.addToLocalAlbumDataQueue(this.funcPromiseTask);
    ....
  }

结果 : 多个异步耗时任务执行

PS :

这里funcPromiseTask看起来不是耗时计算, 异步操作的方法内容, 换一个异步的方法也是一样的效果.

总结 :

使用Promise的方式, 创建按序执行的任务队列