vue项目关于循环调接口的相关问题

Question

问题遇到的现象和发生背景

vue项目中需要在表单里动态填多组数据，需要每一组数据去调接口，现在的情况是，比如填两组数据，会有两个这样的成功弹窗，怎么做一下优化？

问题相关代码，请勿粘贴截图

methods:{
//提交表单数据
addFormData(){
this.booksForm.booksInfo.forEach(item=>{
            //postbooks是封装好的axios请求
            postbooks({ ...item }).then((res) => {
              if (res.data.result) {
                this.$notify.success({
                  title: "成功",
                  message: "新建成功！"
                });
                };
                //重新加载数据
                this.onSubmit();
              } else {
                this.$notify.error({
                  title: "错误",
                  message: res.data.message,
                });
              }
            });
          })
        }
      });
}
}

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

    methods:{
      //提交表单数据
      async addFormData(){
        const isAllTrue = []
      for(let i=0;i<this.booksForm.booksInfo.length;i++){
                  //postbooks是封装好的axios请求
                 await postbooks({ ...this.booksForm.booksInfo[i] }).then((res) => {
                    if(!res.data.result){
                      isAllTrue.push(res.data)
                    }
                  });
                })
                   if (isAllTrue.length==0) {
                      this.$notify.success({
                        title: "成功",
                        message: "新建成功！"
                      });
                      };
                      //重新加载数据
                      this.onSubmit();
                    } else {
                      let errorMsg = isAllTrue.map(item=>item.message)
                      
                      this.$notify.error({
                        title: "错误",
                        message: `项目${errorMsg}创建失败`,
                      });
                    }
              }
            });
      }
      }