Promise.resolve()的应用场景

需求：在一个列表页上方有筛选条件，通过选择类型搜索，有一个按钮点击打开弹框出现添加类型，添加完后列表页上方的类型list改变（条件：类型不能重复）

 

分析：既然过滤条件里面有列表，我们一开始就通过接口获取列表（或者点击下拉的时候调用，我们这里不做这么细），添加的时候不能重复即要对比之前的数据（这里要拿到最新的列表数据）

<el-select class="from-box-input" placeholder="报告类型" filterable size="mini" clearable>
        <template v-for="item in state.reportTypeList">
            <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
        </template>
 </el-select>
        <!-- 新建类型设置 -->
<el-dialog title="新建" v-model:visible="state.dialogTagsVisible" width="700px" custom-class="monthly-create-type-dialog" :close-on-click-modal="false">
    <div style="overflow: auto;width:500px;">
        <el-form ref="form" label-width="120px">
            <el-form-item label="报告类型" required>
                <div class="create-tpye">
                    <el-input v-model="state.typeName" size="mini" />
                    <i class="el-icon-circle-plus" @click="handlerAdd"></i>
                </div>
                <div>
                    <el-tag v-for="(tag,index) in state.newReportTypeList" :key="index" closable :disable-transitions="false" :type="toString(tag.name)">
                        {{tag.name}}
                    </el-tag>
                </div>
            </el-form-item>
        </el-form>
    </div>
    <span class="dialog-footer">
        <el-button type="primary" size="small" @click="handlerSave">保 存</el-button>
    </span>
</el-dialog>

实现方法1：我们在添加类型的时候调用接口获取最新的数据然后对比（添加的时候直接拿到下拉里面的列表但是会存在接口列表未返回就添加的情况）

<script setup lang="ts">
import { reactive } from "vue";

interface reportType {
    name: string;
    id?: number;
}

const apiWrapper = (url: string, type: "get" | "post", data: any): any => {
    return new Promise((resolve) => {
        //请求接口
        // this.$api(url, type, data).then(res=>{resolve(res.data)})
    });
};
const state = reactive({
    reportTypeList: [],
    dialogTagsVisible: false,
    typeName: "",
    newReportTypeList: [],
});
//调用接口获取类型列表
apiWrapper("url", "get", null).then((data: any) => {
    state.reportTypeList = data;
    state.newReportTypeList = data;
});
//打开弹窗
const handlerOpenDialog = () => {
    state.dialogTagsVisible = true;
    //展示的typelist
    state.newReportTypeList = state.reportTypeList;
};
//添加类型
const handlerAdd = async () => {
    if (state.newReportTypeList.some((res) => res.name == state.typeName)) {
        //提示已经添加该类型
    } else {
        (state.newReportTypeList as Array<reportType>).push({ name: state.typeName });
    }
};
const handlerSave = ()=>{
     //调用接口保存类型列表
    let data: Array<reportType> = await apiWrapper("url", "get", null);

    //调用接口获取类型列表
    let data: Array<reportType> = await apiWrapper("url", "get", null);
}
</script>

 实现方法2：使用一个参数在接口返回之后再添加

import { reactive,toRefs } from "vue";

interface reportType {
    name: string;
    id?: number;
}

const apiWrapper = (url: string, type: "get" | "post", data: any): any => {
    return new Promise((resolve) => {
        //请求接口
        // this.$api(url, type, data).then(res=>{resolve(res.data)})
    });
};
const state = reactive({
    reportTypeList: [],
    dialogTagsVisible: false,
    typeName: "",
    newReportTypeList: [],
});

//调用接口获取类型列表
const temp = new Promise((resolve)=>{
    apiWrapper("url", "get", null).then((data: any) => {
        state.reportTypeList = data;
        state.newReportTypeList = data;
        resolve()
    }).finally(res=>{
        temp = null
    })
})
//打开弹窗
const handlerOpenDialog = () => {
    state.dialogTagsVisible = true;
    //展示的typelist
    state.newReportTypeList = state.reportTypeList;
};
//添加类型
const handlerAdd = async () => {
    //temp不为null表示接口还未返回
    if(temp){
        await temp
    }
    let data: Array<reportType> = await apiWrapper("url", "get", null);
    if (data.some((res) => res.name == state.typeName)) {
        //提示已经添加该类型
    } else {
        (state.newReportTypeList as Array<reportType>).push({ name: state.typeName });
    }
    
};
const handlerSave = ()=>{
     //调用接口保存类型列表
    let data: Array<reportType> = await apiWrapper("url", "get", null);
    //调用接口获取类型列表
    let data: Array<reportType> = await apiWrapper("url", "get", null);
}

  实现方法：使用一个Promise.resolve接收

import { reactive,toRefs } from "vue";

interface reportType {
    name: string;
    id?: number;
}

const apiWrapper = (url: string, type: "get" | "post", data: any): any => {
    return new Promise((resolve) => {
        //请求接口
        // this.$api(url, type, data).then(res=>{resolve(res.data)})
    });
};
const state = reactive({
    reportTypeList: [],
    dialogTagsVisible: false,
    typeName: "",
    newReportTypeList: [],
});

//调用接口获取类型列表
const temp = new Promise((resolve)=>{
    apiWrapper("url", "get", null).then((data: any) => {
        state.reportTypeList = data;
        state.newReportTypeList = data;
        resolve()
    }).finally(res=>{
       temp=Promise.resolve()
    })
})
//打开弹窗
const handlerOpenDialog = () => {
    state.dialogTagsVisible = true;
    //展示的typelist
    state.newReportTypeList = state.reportTypeList;
};
//添加类型
const handlerAdd = async () => {
    //temp不为null表示接口还未返回
    // if(temp){
    //     await temp
    // }
    //不需要if判断了
    temp.then(()=>{
        let data: Array<reportType> = await apiWrapper("url", "get", null);
        if (data.some((res) => res.name == state.typeName)) {
            //提示已经添加该类型
        } else {
            (state.newReportTypeList as Array<reportType>).push({ name: state.typeName });
        }
    })
};
const handlerSave = ()=>{
     //调用接口保存类型列表
    let data: Array<reportType> = await apiWrapper("url", "get", null);
    //调用接口获取类型列表
    let data: Array<reportType> = await apiWrapper("url", "get", null);
}