背景

在dva的model中，详情接口返回了内容详情的的字段（该字段存储的是富文本的内容），但是该字段返回的是oss链接，需要将oss转换为html才能正常展示，所以我需要再详情接口返回之后，批量获取oss链接对应的html

编码实战

const content = {
  namespace: 'content',
  state: {
    contentInfo: {}, // 内容详情
  },
  effects: {
    *getContentInfo({ payload }, { call, put }) {
      const res = yield call(getContentInfo, payload);
      const { success, resultInfo } = res;
      let contentDescriptionZh = '';
      let contentDescriptionEn = '';
      if (resultInfo.siteDescription) {
         // 将获取的富文本地址转换为html
        const requestList = [];
        if (resultInfo.contentDescription['zh-cn']) {
          requestList.push(
            getOSSContent(resultInfo.contentDescription['zh-cn'])
          );
        }
        if (resultInfo.contentDescription['en-us']) {
          requestList.push(
            getOSSContent(resultInfo.contentDescription['en-us']Ï)
          );
        }
        [contentDescriptionZh, contentDescriptionEn] = yield Promise.all(requestList);
      }

      yield put({
        type: 'updateState',
        payload: {
          contentInfo:
            {
              ...resultInfo,
              contentDescription: {
                'zh-cn': contentDescriptionZh || '',
                'en-us': contentDescriptionEn || '',
              },
            },
        },
      });
    }, 
  },
  reducers: {
    updateState(state, { payload }) {
      return { ...state, ...payload };
    },
  },
};
export default content;

关键代码

Promise.all

  const [data1, data2] = yield Promise.all([
      getHtmlByUrl(payload),
      getHtmlByUrl(payload),
    ]);

在 yield 关键字后面使用了 Promise.all,因为 yield 可以等待 Promise 的完成