javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > ES6   Promise用法

ES6   Promise基础用法(resolve、reject、then、catch,all)

作者:n'an-n'an

Promise是JavaScript中处理异步操作的对象,它有三种状态:Pending、Fulfilled、Rejected,使用new Promise创建Promise对象,通过resolve和reject改变状态,then和catch方法用于处理成功和失败的结果,本文介绍ES6 Promise用法,感兴趣的朋友一起看看吧

在 JavaScript 中,Promise 是一种用于处理异步操作的对象。它允许开发者以一种更清晰和更可控的方式来处理异步操作,避免回调地狱的问题。Promise 对象有以下几个状态:

Pending:初始状态,表示异步操作正在进行中。
Fulfilled:表示异步操作成功完成。
Rejected:表示异步操作失败。
Promise 对象提供了两个方法来改变其状态:resolve 和 reject。then 和 catch 方法用于处理 Promise 的成功和失败状态。all 方法用于等待一组 Promise 实例都完成。

以下是 Promise 的基础用法详解:

创建一个 Promise: 使用 new Promise() 创建一个新的 Promise 对象,并传入一个函数作为参数。这个函数称为执行器(executor),它接受两个参数:resolve 和 reject。resolve 函数用于将 Promise 的状态设置为 fulfilled,而 reject 函数用于将 Promise 的状态设置为 rejected。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(/* 成功的结果 */);
  } else {
    reject(/* 失败的原因 */);
  }
});

使用 then 方法: then 方法用于处理 Promise 的 fulfilled 状态。它接受两个参数:一个函数用于处理成功的结果,另一个函数用于处理失败的结果(可选)。

promise.then((result) => {
  // 成功的回调函数
  console.log(result);
}, (error) => {
  // 失败的回调函数(可选)
  console.error(error);
});

使用 catch 方法: catch 方法用于处理 Promise 的 rejected 状态。它相当于只传入失败回调函数的 then 方法。

promise.catch((error) => {
  // 失败的回调函数
  console.error(error);
});

使用 all 方法: all 方法用于等待一组 Promise 实例都完成。它返回一个新的 Promise 对象,当所有的 Promise 实例都成功时,这个新的 Promise 对象才会成功;如果有任何一个 Promise 实例失败,那么这个新的 Promise 对象也会失败。

const promises = [promise1, promise2, promise3];
Promise.all(promises).then((results) => {
  // 所有 Promise 实例都成功时的回调函数
  console.log(results);
}).catch((error) => {
  // 任何一个 Promise 实例失败时的回调函数
  console.error(error);
});

使用 race 方法: race 方法用于等待一组 Promise 实例中的任意一个完成。它返回一个新的 Promise 对象,当第一个 Promise 实例完成时,这个新的 Promise 对象就会完成,无论其是成功还是失败。

const promises = [promise1, promise2, promise3];
Promise.race(promises).then((result) => {
  // 第一个 Promise 实例完成时的回调函数
  console.log(result);
}).catch((error) => {
  // 第一个 Promise 实例失败时的回调函数
  console.error(error);
});

到此这篇关于ES6 Promise基础用法(resolve、reject、then、catch,all)的文章就介绍到这了,更多相关ES6 Promise用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文