拒绝与等待：掌握中断Promise的艺术

2023-12-15 07:14:10

理解Promise中断

Promise是一种JavaScript对象，用于表示异步操作的结果。它具有三种状态：pending（等待）、fulfilled（已完成）和rejected（已拒绝）。在Pending状态下，Promise可能会因为某种原因被中断，而不会继续执行。

中断Promise的方法很简单：调用reject()方法。这将立即将Promise的状态从pending更改为rejected，并触发任何注册的catch()或finally()处理程序。

const promise = new Promise((resolve, reject) => {
  // 执行异步操作
  if (somethingWentWrong) {
    reject(new Error('An error occurred'));
  } else {
    resolve('Operation completed successfully');
  }
});

promise.catch((error) => {
  // 处理错误
});

中断Promise的常见用例

中断Promise有许多常见的用例，包括：

取消异步操作： 如果异步操作需要很长时间才能完成，或者您不再需要其结果，则可以使用中断Promise来取消它。
处理错误： 当异步操作失败时，您可以使用中断Promise来处理错误并向用户显示有意义的消息。
超时： 您可以使用中断Promise来为异步操作设置超时。如果操作在指定时间内没有完成，Promise将被中断，并且您可以在catch()处理程序中处理超时。

中断Promise的示例

以下是一些中断Promise的示例：

取消XHR请求：

const request = new XMLHttpRequest();
request.open('GET', 'https://example.com');

// 设置超时
request.timeout = 5000; // 5秒

// 注册中断处理程序
request.onabort = () => {
  console.log('Request was aborted');
};

// 发出请求
request.send();

// 取消请求
request.abort();

处理服务器错误：

const promise = fetch('https://example.com/api/v1/users');

promise.then((response) => {
  if (response.ok) {
    return response.json();
  } else {
    throw new Error('Server error');
  }
})
.catch((error) => {
  // 处理服务器错误
});

超时处理：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation completed successfully');
  }, 10000);
});

// 设置超时
const timeoutPromise = Promise.race([
  promise,
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Operation timed out'));
    }, 5000);
  })
]);

timeoutPromise.then((result) => {
  // 处理成功结果
}, (error) => {
  // 处理超时错误
});