掌握异步之道，掌控js编程技能，提升开发效率

前端

2023-12-25 03:13:15

异步编程简介

在JavaScript中，异步编程是指允许程序在等待耗时操作（如网络请求或数据库查询）完成时继续执行。这可以提高程序的性能和响应能力，因为主线程可以继续处理其他任务，而不会被耗时操作阻塞。

Promise

Promise是一个表示异步操作的最终完成或失败的JavaScript对象。它提供了对异步操作的统一接口，简化了异步编程。

Promise有三个状态：

待定（pending）：表示异步操作尚未完成。
已完成（fulfilled）：表示异步操作已成功完成。
已拒绝（rejected）：表示异步操作已失败。

Promise对象提供以下方法：

then()：用于处理异步操作的结果。如果异步操作成功完成，则调用第一个回调函数；如果异步操作失败，则调用第二个回调函数。
catch()：用于处理异步操作的失败。

例如，以下代码演示了如何使用Promise来处理网络请求：

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

Generator

Generator是一个JavaScript函数，它可以暂停并恢复执行。这使得Generator非常适合处理异步操作，因为我们可以使用yield来暂停Generator的执行，等待异步操作完成，然后继续执行Generator。

例如，以下代码演示了如何使用Generator来处理网络请求：

function* getData() {
  const response = yield fetch('https://example.com/data.json');
  const data = yield response.json();
  return data;
}

getData().next().value.then(data => {
  // 处理数据
});

async/await

async/await是ES2017中引入的语法糖，它可以使Generator的代码更加简洁和易读。

async关键字用于定义一个异步函数，await关键字用于等待异步操作完成。

例如，以下代码演示了如何使用async/await来处理网络请求：

async function getData() {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();
  return data;
}

getData().then(data => {
  // 处理数据
});

手动实现Promise

Promise是一个非常强大的工具，但我们也可以自己手动实现一个简单的Promise。

以下代码演示了如何手动实现一个Promise：

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

    const resolve = (result) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.result = result;
        this.onFulfilledCallbacks.forEach(callback => callback(result));
      }
    };

    const reject = (error) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.result = error;
        this.onRejectedCallbacks.forEach(callback => callback(error));
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        resolve(onFulfilled(this.result));
      } else if (this.state === 'rejected') {
        reject(onRejected(this.result));
      } else {
        this.onFulfilledCallbacks.push(() => {
          resolve(onFulfilled(this.result));
        });
        this.onRejectedCallbacks.push(() => {
          reject(onRejected(this.result));
        });
      }
    });
  }

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