任务需求：
1. 根据选择日期的条数分别向接口发送数据，选择几个日期发送几次请求。
2. 当每条数据都发送成功后，弹出一条操作成功提示。
<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=>{ //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]);`
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 = [];
})
最后，两种方法都可以实现功能需求，可以根据自身情况选择这两种方法。
