Redux-Saga：UI阻塞，直到api调用的API请求块返回为止。我们如何在不阻止ui的情况下实现这一目标？

Question

function* getTagsAllImages(dataList = []) {
  const chunkedList = yield call(chunk, dataList, 5);

  for (let list of chunkedList) {
    const requests = list.map(item => call(getStoreLableimage, item._id, item.image));

    const responses = yield all(requests);
    const filtertedReponse = responses.filter(response => (response ? true : false));

    const indexes = yield call(getIndexedTagsIds);

    yield put(setTagImageSuccess({ image: filtertedReponse, indexes }));
  }
}

Answer 1

由于yield将等待所有api调用的响应，因此在requests中的api调用得到解决之前，不会再进行其他api调用。因此，您需要使用flatMap而不是for循环。这样，所有呼叫都将发生而不会被阻塞。

function* getTagsAllImages(dataList = []) {
  const chunkedList = yield call(chunk, dataList, 5);

    const requests = chunkedList.flatMap(list => 
 list.map(item => call(getStoreLableimage, item._id, item.image)));

    const responses = yield all(requests);
    const filtertedReponse = responses.filter(response => (response ? true : false));

    const indexes = yield call(getIndexedTagsIds);

    yield put(setTagImageSuccess({ image: filtertedReponse, indexes }));
}

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap