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

Li_na_na01

已于 2022-06-20 15:30:15 修改

阅读量1.6k

点赞数 2

分类专栏： Promise 文章标签：前端 promise es6

于 2022-06-20 15:27:21 首次发布

本文链接：https://blog.csdn.net/li_na_na01/article/details/125097436

版权

Promise 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

博客讲述了在获取表单页面列表时遇到的问题，即当遍历并异步加载select下拉数据时，由于async/await在map中可能导致数据未及时更新。作者提供了两种解决方案：一是使用for...of循环，二是利用Promise.all。这两种方法确保了所有下拉数据加载完成后再更新页面，从而解决了下拉未显示的问题。

摘要由CSDN通过智能技术生成

问题描述

接口获取页面表单列表。遍历找出需请求下拉数据的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)
      })
}