promise

1、什么是promise？

promise是异步编程的一种解决方案，是回调的升级版，在处理需要花费一段时间的任务时，使用promise,就可以进行异步操作，防止阻塞，

2、 这里先说一下什么是回调函数

:回调函数，以函数作为参数传入到另一个函数中调用,举个栗子：

<template>
    <div class="content">
        <button @click="clickBtn" class="btn">点击</button>
    </div>
</template>

<script>
export default {
    name: "msg",
    data() {
        return {};
    },
    methods: {
        clickBtn() {
            this.a(this.b);
        },
        // 回调函数
        b(value) {
            console.log(`${value}是紫色的`);
            console.log("1");
        },
        a(callback) {
            let value = "葡萄";
            console.log("先定义value的值,再作为参数传给回调函数");
            callback(value);
        },
    },
};
</script>

<style scoped>
.content {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.btn {
    height: 30px;
    width: 60px;
}
</style>

3、举一个Promise 相关的例子

<template>
    <div class="content">
        <button @click="clickBtn" class="btn">点击</button>
    </div>
</template>

<script>
export default {
    name: "msg",
    data() {
        return {
            fishValue: true,
        };
    },
    methods: {
        clickBtn() {
            let dinner = new Promise((resolve, reject) => {
                if (this.fishValue) {
                    resolve("吃鱼");
                } else {
                    reject("吃面条");
                }
            });
            dinner
                .then((value) => {
                    console.log(`晚饭我决定${value}`);
                })
                .catch((value) => {
                    console.log(`晚饭我决定${value}`);
                })
                .finally((value) => {
                    console.log("吃完饭去爬泰山");
                });
        },
    },
};
</script>

<style scoped>
.content {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.btn {
    height: 30px;
    width: 60px;
}
</style>