vue 如何让多个相同请求状态 只显示一条成功信息

任务需求：

1. 根据选择日期的条数分别向接口发送数据，选择几个日期发送几次请求。

2. 当每条数据都发送成功后，弹出一条操作成功提示。

弹框展示

         

          {{modifyForm.roomTypeName}}

         

         

           

             

             

             

             

                删除

             

             

                添加

             

           

         

         

           

             

                全部

             

             

               

                  {{week.name}}

               

             

           

         

         

          价格明细

         

           

         

         

           

             

             

             

             

             

           

         

       

       

          确 定

       

     

export default {

  data() {

  pickerOptions: {

        disabledDate(time) {

          return time.getTime() < Date.now() - 8.64e7;

        }

      },

      modifyForm: {

        price: "",

        breakfastNum: "0"

      },

      dateItems:[],

  }

},

    methods: {

      confirmChanges() {

      let arr = [];  //定义个空数组

      for(let i = 0; i

        arr.push([i]*0)

        let list = this.dateItems.map(item=>{  //dateItems 是给添加日期

          return item.date

      })

      post("/hotel/dailyPrice/update", {

            id: this.modifyForm.id,

            price: this.modifyForm.price,

            breakfastNum: this.modifyForm.breakfastNum,

            startDate: list[i][0],

            endDate: list[i][1],

            weeks: this.checkedWeeks.join(",")

      }).then(res=>{

              if(res.resultCode === 100){

                arr.splice([i],[i].length,1)

              }

          })

      }

      setTimeout(()=>{

          let arrItem =  arr.every( item=>{

              return item === 1;

          });

          if(arrItem == true){

              this.getDailyPrice();

              this.dialogModifyPrice = false;

              this.$message.success("修改成功！");

              this.dateItems = [];

          } 

      },500)

  }

}

第二种方法：

- 使用promise.all 方法

- 先定义一个数组用来存放参数传给 Promise.all

- 将发送请求方法 包装成Promise 实例。

- 只有发送得请求状态都成功后，才会调用Promise.all方法后面的回调函数。

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

例子 ：`const p = Promise.all([p1, p2, p3]);`

es6 Promise.all() 具体方法使用

      let arr = [];

      for(let i = 0; i

        let list = this.dateItems.map(item=>{

          return item.date

      })

        const p = ()=>{

          return new Promise((resolve, reject) => {

              setTimeout(()=>{

                resolve(

                    post("/hotel/dailyPrice/update", {

                      id: this.modifyForm.id,

                      price: this.modifyForm.price,

                      breakfastNum: this.modifyForm.breakfastNum,

                      startDate: list[i][0],

                      endDate: list[i][1],

                      weeks: this.checkedWeeks.join(",")

                    })

                )

              }, 100*i);

              });

          }

          arr.push(p());

      }

      Promise.all(arr).then(()=>{

          this.getDailyPrice();

          this.dialogModifyPrice = false;

          this.$message.success("修改成功！");

          this.dateItems = [];

      })

最后，两种方法都可以实现功能需求，可以根据自身情况选择这两种方法。