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

任务需求：

1. 根据选择日期的条数分别向接口发送数据，选择几个日期发送几次请求。
2. 当每条数据都发送成功后，弹出一条操作成功提示。
   

第一种方法：

• 定义一个数组，根据日期条数向数组中push相应的 ‘0’；
• 每成功一次将数组中的‘0’ 修改成‘1’；
• 当所有的数据都发送成功后判断数组中的数据是否都为‘1’，如果都是‘1’，则提示操作成功，并隐藏弹框。

	 <el-dialog title="修改价格" :visible.sync="dialogModifyPrice" width="35%" :before-close="handleClose" class="formMain">
        <el-form ref="modifyForm" :model="modifyForm" label-width="90px">
          <el-form-item label="商品名称：">{{modifyForm.roomTypeName}}</el-form-item>
          <el-divider></el-divider>
          <el-form-item label="选择日期：">
            <el-row v-for="(item,index) in dateItems" :key="index">
              <el-col :span="14">
                <el-date-picker v-model="item.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions" size="small"></el-date-picker>
              </el-col>
              <el-col :span="3">
                <el-button type="danger" size="mini" class="modifyBtn" v-show="index!=0" @click="deleteInfo(item,index)">删除</el-button>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" size="mini" class="modifyBtn" v-if="dateStatus" @click="addInfo(item,index)">添加</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label-width="30px">
            <el-row>
              <el-col :span="3">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"  @change="handleCheckAllChange" class="week" size="mini">全部</el-checkbox>
              </el-col>
              <el-col :span="21">
                <el-checkbox-group v-model="checkedWeeks" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="week in weekOptions" :label="week" :key="week.id" class="week" size="mini">{{week.name}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label-width="10px">价格明细</el-form-item>
          <el-form-item label="价 格：" label-width="100px">
            <el-input v-model="modifyForm.price" size="small" class="inputPrice"></el-input>
          </el-form-item>
          <el-form-item label="早 餐：" label-width="100px">
            <el-select v-model="modifyForm.breakfastNum" placeholder="0" size="small" class="inputPrice">
              <el-option label="0" value="0"></el-option>
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
              <el-option label="4" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmChanges()">确 定</el-button>
        </span>
      </el-dialog>

	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<this.dateItems.length; i++){     
	        arr.push([i]*0)
	        let list = this.dateItems.map(item=>{   
	          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<this.dateItems.length; 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 = [];
       })

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