亲测答案，函数式编程与JS异步编程，轻松搞定！

前端

2023-10-26 18:05:02

函数式编程与JS异步编程，你准备好了吗？

一、JS异步编程的本质

在JavaScript中，我们的代码执行都是在单线程环境下进行的，这意味着同一时刻只能执行一个任务，其他任务则需要排队等待。当需要执行的异步任务（例如网络请求、文件读写等）时，我们需要使用一些特殊的机制来避免阻塞主线程。

二、事件循环和回调函数

为了解决这个问题，JavaScript引入了一个叫做“事件循环”的概念。事件循环是一个无限循环，它不断检查是否有新的事件发生，如果有，就将它添加到队列中。当队列中的事件处理完毕后，事件循环就会继续检查是否有新的事件发生。

回调函数是用来处理事件的一种函数。当一个事件发生时，它就会被调用。例如，当一个网络请求完成时，就会调用一个回调函数来处理请求的结果。

三、Promise的诞生

在使用回调函数处理异步任务时，代码很容易变得混乱和难以理解。为了解决这个问题，Promise应运而生。

Promise是一个对象，它代表了一个异步操作的最终结果。Promise有三种状态：等待、成功和失败。

四、手写Promise实例

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') return;

      this.state = 'fulfilled';
      this.result = value;
      this.onFulfilledCallbacks.forEach(callback => callback(value));
    };

    const reject = (reason) => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.result = reason;
      this.onRejectedCallbacks.forEach(callback => callback(reason));
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const value = onFulfilled(this.result);
            resolve(value);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const reason = onRejected(this.result);
            resolve(reason);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const value = onFulfilled(this.result);
              resolve(value);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const reason = onRejected(this.result);
              resolve(reason);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  finally(onFinally) {
    return this.then(
      (value) => {
        onFinally();
        return value;
      },
      (reason) => {
        onFinally();
        throw reason;
      }
    );
  }

  static resolve(value) {
    return new Promise((resolve) => {
      resolve(value);
    });
  }

  static reject(reason) {
    return new Promise((resolve, reject) => {
      reject(reason);
    });
  }

  static all(promises) {
    return new Promise((resolve, reject) => {
      const results = [];
      let count = 0;

      promises.forEach((promise, index) => {
        promise.then(
          (value) => {
            results[index] = value;
            count++;

            if (count === promises.length) {
              resolve(results);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      });
    });
  }

  static race(promises) {
    return new Promise((resolve, reject) => {
      promises.forEach((promise) => {
        promise.then(resolve, reject);
      });
    });
  }
}