什么是promise？什么是回调函数？

最新推荐文章于 2024-11-02 19:19:35 发布

小钟要长高

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量173

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/q515518/article/details/129266894

版权

Promise是JavaScript中处理异步操作的方法，它是回调函数的升级，避免了回调地狱。文中通过代码示例展示了如何使用Promise处理异步任务，包括resolve和reject的运用，以及then、catch和finally方法来管理异步流程。

摘要由CSDN通过智能技术生成

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>