Vue 中手写 Promise 实现异步操作的方法

在 Vue 开发过程中，异步操作极为常见，而 Promise 是处理异步操作的有力工具。了解如何手写 Promise 能帮助开发者更深入理解其原理与应用。

Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。初始状态为 pending，当操作成功完成，状态变为 fulfilled；若操作失败，则变为 rejected。

接下来看看如何手写一个简单的 Promise。代码如下：

function MyPromise(executor) {
    let self = this;
    self.status = 'pending';
    self.value = undefined;
    self.reason = undefined;
    function resolve(value) {
        if (self.status === 'pending') {
            self.status = 'fulfilled';
            self.value = value;
        }
    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.status ='rejected';
            self.reason = reason;
        }
    }
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}

上述代码定义了一个 MyPromise 构造函数，它接收一个执行器 executor，执行器接受 resolve 和 reject 两个函数。在执行器内部，调用 resolve 或 reject 会改变 Promise 的状态。

在 Vue 组件中使用这个自定义的 Promise：

<template>
    <div>
        <button @click="handleClick">点击</button>
        <p v-if="result">{{ result }}</p>
        <p v-if="error">{{ error }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            result: null,
            error: null
        };
    },
    methods: {
        handleClick() {
            let promise = new MyPromise((resolve, reject) => {
                setTimeout(() => {
                    let randomNumber = Math.random();
                    if (randomNumber > 0.5) {
                        resolve('操作成功');
                    } else {
                        reject('操作失败');
                    }
                }, 1000);
            });
            promise.then(value => {
                this.result = value;
            }).catch(reason => {
                this.error = reason;
            });
        }
    }
};
</script>

在这个 Vue 组件中，点击按钮时创建一个 MyPromise 实例，模拟一个异步操作。根据随机数决定是成功还是失败，并通过 then 和 catch 方法处理相应结果。

通过手写 Promise，我们清晰地看到了其内部机制，在 Vue 中使用它能够更灵活地控制异步操作流程，提升代码的可维护性与可读性。无论是处理网络请求，还是执行复杂的异步任务，Promise 都为 Vue 开发者提供了强大的支持。