js中生成器用户示例

发表于

记录下js中生成器的妙用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
function pagination(api, param) {
  async function* paginationIterator() {
    const defaultPrams = {
      pageSize: 20,
      pageNo: 1
    };
    const thePaginationData = [];
    const sentPrams = { ...defaultPrams, ...param };

    do {
      const { total, data } = await api(sentPrams);
      sentPrams.pageNo += 1;
      sentPrams.total = total;
      thePaginationData.push(...data);
      yield thePaginationData;
    } while ((sentPrams.pageNo - 1) * sentPrams.pageSize < sentPrams.total);
  }
  const iterator = paginationIterator();

  const fetchPagination = async () => {
    const { done, value } = await iterator.next();
    if (done) return null;
    return value;
  };

  return fetchPagination;
}

const fetchApi = params => {
  return new Promise(resolve => {
    setTimeout(() => {
      if (params.pageNo < 3) {
        resolve({
          data: [1 * params.pageNo, 2, 3, 4, 5],
          total: 13
        });
      } else {
        resolve({
          data: [111, 112, 113],
          total: 13
        });
      }
    }, 2000);
  });
};

const fetchMoreGoods = pagination(fetchApi, {pageSize: 5});

let isFetching = false;

const getData = async () => {
  if (isFetching) return;
  isFetching = true;
  try {
    const data = await fetchMoreGoods();
    console.log(data);
  } catch (error) {
  } finally {
      isFetching = false;
  }
};

// 不能这样测试哦，由于js是单线程，这里会一直占用执行线程，因而就没空去运行 setTimeout(() => {}) 等微、宏任务了。
// while(true) {
//     getData();
// }

// 测试下
getData();

setTimeout(() => {
    getData()
    setTimeout(() => {
        getData()
        setTimeout(() => {
            getData()
        }, 3000);
    }, 3000);
}, 3000);
/**
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5, 2, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5, 2, 2, 3, 4, 5, 111, 112, 113 ]
null
 */