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

 更新时间:2024年09月25日 10:07:33   作者: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用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 前端实现水印功能的几种方法及优缺点

    前端实现水印功能的几种方法及优缺点

    这篇文章主要介绍了前端开发中实现网页或图像水印的六种方法,包括使用CSS背景图、HTML5 Canvas、SVG、图片处理库、HTML DOM元素以及后端生成,每种方法都有其优缺点,适用于不同的场景,需要的朋友可以参考下
    2025-01-01
  • 基于AGS JS开发自定义贴图图层

    基于AGS JS开发自定义贴图图层

    这篇文章主要为大家详细介绍了基于AGS JS开发自定义贴图图层的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Bootstrap三种表单布局的使用方法

    Bootstrap三种表单布局的使用方法

    这篇文章主要为大家详细介绍了Bootstrap三种表单布局的使用方法,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 微信小程序自定义导航栏及其封装的全过程

    微信小程序自定义导航栏及其封装的全过程

    在小程序项目开发过程中常遇到自定义导航栏的需求,所以下面这篇文章主要给大家介绍了关于微信小程序自定义导航栏及其封装的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 微信小程序学习笔记之本地数据缓存功能详解

    微信小程序学习笔记之本地数据缓存功能详解

    这篇文章主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • BootStrap 智能表单实战系列(十)自动完成组件的支持

    BootStrap 智能表单实战系列(十)自动完成组件的支持

    这篇文章主要介绍了BootStrap 智能表单实战系列(十)自动完成组件的支持 的相关资料,需要的朋友可以参考下
    2016-06-06
  • js防阻塞加载的实现方法

    js防阻塞加载的实现方法

    下面小编就为大家带来一篇js防阻塞加载的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 一个JavaScript防止表单重复提交的实例

    一个JavaScript防止表单重复提交的实例

    防止重复表单提交的方法有很多,本文使用JavaScript来实现防止表单重复提交,很简单,但很实用,新手朋友们不要错过
    2014-10-10
  • 在小程序中使用canvas的方法示例

    在小程序中使用canvas的方法示例

    这篇文章主要介绍了在小程序中使用canvas的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JS实现简单的九宫格抽奖

    JS实现简单的九宫格抽奖

    这篇文章主要为大家详细介绍了JS实现简单的九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论