js map循环中await无效问题解决

问题描述

接口获取页面表单列表。遍历找出需请求下拉数据的select，获取下拉数据并赋值给表单项，重新渲染页面实现表单展示。

const FormPageList = async () => {
	// 获取表单项
	const res = await getFormList({meetingType: 1, pageName: 'meetingAdd'});
	// 获取select表单的下拉
	(res.obj.fieldForm).map(async (formItem: FormItemT) => {
	 if(formItem.fieldType == 'SELECT' && formItem.listRequest){
	      const res1 = await getList(formItem)
	      formItem['optionList'] = res1.obj.result
	    }
	})
	// 更新表单项
	setFormList(res.obj.fieldForm)
}

页面渲染发现，表单项成功展示，但是下拉未显示。但是代码中的打印处显示数据还是正确的。猜测是map中的await失效，debugger调试发现确实如此。

解决方案

使用for…of

const FormPageList = async () => {
	// 获取表单项
	const res = await getFormList({meetingType: 1, pageName: 'meetingAdd'});
	// 获取select表单的下拉
	for(let formItem of res.obj.fieldForm){
       if(formItem.fieldType == 'SELECT' && formItem.listRequest){
        const res1 = await FormOptions[formItem.listRequest](formItem)
        formItem['optionList'] = res1.obj.result
      }
    }
	// 更新表单项
	setFormList(res.obj.fieldForm)
}

使用Promise.all

const FormPageList = async () => {
	// 获取表单项
	const res = await getFormList({meetingType: 1, pageName: 'meetingAdd'});
	// 获取select表单的下拉
	const newList = (res.obj.fieldForm).map(async (formItem: FormItemT) => {
        if (formItem.fieldType == 'SELECT' && formItem.listRequest) {
        // 此处因需要设置optionList，所以返回了一个手写的Promise
        // 若无特殊操作，直接返回异步请求即可
          const res1 = await FormOptions[formItem.listRequest](formItem)
          formItem['optionList'] = res1.obj
        }
        return new Promise((resolve) => {
          resolve(formItem)
        })
      })
	// 所有下拉完成后更新表单项
	Promise.all(newList).then(() => {
        setFiledObj(res.obj)
      })
}