javascript - 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 }));
  }
}

标签： javascriptreactjsweb-workerredux-saga

Answer 1

由于yield将等待所有 api 调用的响应，因此在解决 api 调用之前不会发生进一步的 api 调用requests。所以，你需要使用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