使用 Promise 实现计算器中的异步计算_技术教程

本文将介绍如何使用 Promise 在 JavaScript 计算器类中实现异步计算功能。我们将分析现有代码的问题，并提供一个简洁、高效的解决方案，确保计算在成功时返回结果，并在出现错误时拒绝 Promise 并返回 NaN。

问题分析

原代码中的 calculate 函数存在以下几个主要问题：

不必要的 setTimeout： 题目要求的是返回一个 Promise，但并没有要求延迟计算结果。setTimeout 的使用是多余的。
参数处理错误： calculate 函数应该接受一个函数作为参数，而不是使用 ...args。
结果计算缺失： result 变量始终为 0，没有调用回调函数进行实际的计算。
resolve 和 reject 参数错误： resolve 应该传入计算结果，reject 应该传入 NaN。
错误处理逻辑不完善： 题目要求在计算过程中出现错误时拒绝 Promise，并返回 NaN。原代码没有正确处理这种情况。

解决方案

以下是一个使用 async/await 简化 Promise 处理的 calculate 函数实现：

class Calculator{
    constructor(){
        this[Symbol.toStringTag] = 'Calculator'; 
    } 
    add(a, b) {
        return a + b; 
    } 
    subtract(a, b) {
        return a - b; 
    }  
    multiply(a, b) {
        return a * b;
    } 
    divide(a, b) {
        if(b === 0){ 
            return NaN;
        }
        return a / b; 
    }
    toString(){
        return "Calculator";
    }
    async calculate(f) {
        try {   
            return f.call(this);
        } catch {
            throw NaN;
        }
    }
}

代码解释：

async calculate(f)： async 关键字使得该函数可以返回一个 Promise，并允许使用 await 关键字。
try...catch 块： 使用 try...catch 块来捕获计算过程中可能发生的错误。
f.call(this)： 调用传入的函数 f，并使用 call 方法将 this 上下文绑定到 Calculator 实例。这使得在 f 中可以访问 Calculator 的 add、subtract 等方法。
throw NaN： 如果在 try 块中发生错误，catch 块会捕获该错误，并抛出一个 NaN。 async 函数会将抛出的 NaN 转换为一个 rejected Promise，并将 NaN 作为拒绝的原因。
return f.call(this)： 如果计算成功完成，try 块中的 return 语句会将计算结果包装在一个 resolved Promise 中返回。

使用示例

const calculator = new Calculator();

calculator.calculate(function() {
  return this.add(1, 2) + this.multiply(3, 4);
})
.then(result => {
  console.log("计算结果:", result); // 输出：计算结果: 15
})
.catch(error => {
  console.error("计算出错:", error);
});

calculator.calculate() // 传入undefined，会报错
.then(result => {
    console.log("计算结果:", result);
})
.catch(error => {
    console.error("计算出错:", error); // 输出：计算出错: NaN
});