Promise 的 API 理解与使用

最新推荐文章于 2023-12-05 19:35:58 发布
最新推荐文章于 2023-12-05 19:35:58 发布
阅读量1.3k 收藏 6
点赞数
分类专栏： Javascript 文章标签： js promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/119516639
版权
一、promise 的 API 说明
  1. Promise 构造函数: Promise (excutor) {}，如下所示：
  • executor 函数: 执行器 (resolve, reject) => {}
  • resolve 函数: 内部定义成功时我们调用的函数 value => {}
  • reject 函数: 内部定义失败时我们调用的函数 reason => {}
  • 说明: executor会在 Promise 内部立即同步调用,异步操作在执行器中执行
  1. Promise.prototype.then 方法: (onResolved, onRejected) => {}，如下所示：
  • onResolved 函数: 成功的回调函数 (value) => {}
  • onRejected 函数: 失败的回调函数 (reason) => {}
  • 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
    返回一个新的 promise 对象
  1. Promise.prototype.catch 方法: (onRejected) => {}，如下所示：
  • onRejected 函数: 失败的回调函数 (reason) => {}
  • 说明: then() 的语法糖, 相当于: then(undefined, onRejected)
  1. Promise.resolve 方法: (value) => {}，如下所示：
  • value: 成功的数据或 promise 对象
  • 说明: 返回一个成功/失败的 promise 对象
  1. Promise.reject 方法: (reason) => {}，如下所示：
  • reason: 失败的原因
  • 说明: 返回一个失败的 promise 对象
  1. Promise.all 方法: (promises) => {}，如下所示：
  • promises: 包含 n 个 promise 的数组
  • 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就
    直接失败
  1. Promise.race 方法: (promises) => {}，如下所示：
  • promises: 包含 n 个 promise 的数组
  • 说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态
二、promise API 的使用
  1. promise的 API 之 then 和 catch，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise的API之then和catch</title>
</head>
<body>
  <script>
    let p = new Promise((resolve, reject) => {
      // 同步调用
      // 修改 promise 对象的状态
      reject('error');
    });

    // 执行 catch 方法
    p.catch(reason => {
      console.log(reason);
    });
  </script>
</body>
</html>
  1. promise 的 API 之 resolve，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise的API之resolve</title>
</head>
<body>
  <script>
    let p1 = Promise.resolve(123);
    //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
    //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
    let p2 = Promise.resolve(new Promise((resolve, reject) => {
      reject('error');
    }));

    p2.catch(reason => {
      console.log(reason);
    });
    
  </script>
</body>
</html>
  1. promise 的 API 之 reject，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise的API之reject</title>
</head>
<body>
  <script>
    let p1 = Promise.reject('123');
    let p2 = Promise.reject('456');
    let p3 = Promise.reject(new Promise((resolve, reject) => {
      resolve('ok');
    }));

    console.log(p3);

  </script>
</body>
</html>
  1. promise 的 API 之 all，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise的API之all</title>
</head>
<body>
  <script>
    let p1 = new Promise((resolve, reject) => {
      resolve('ok1');
    });
    
    // let p2 = Promise.resolve('ok2')
    let p2 = Promise.reject('Error');
    let p3 = Promise.resolve('ok3');

    let result = Promise.all([p1, p2, p3]);
    console.log(result);

  </script>
</body>
</html>
  1. promise 的 API 之 race，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise的API之race</title>
</head>
<body>
  <script>
    let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('ok');
      }, 1000);
    });

    let p2 = Promise.resolve('success');
    let p3 = Promise.resolve('true');

    // 调用
    const result = Promise.race([p1, p2, p3]);
    console.log(result);
    
  </script>
</body>
</html>
城南花开ze
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise基础（下）
weixin_54685571的博客
04-16 7050
1. 初始结构搭建 //Promise.html文件 <script src="./Promise.js"></script> <script> let P = new Promise((resolve, reject) => { resolve("OK"); }); P.then( (value) => { console.log(value); },
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7340
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
Promise学习（二）一篇文章带你快速了解Promise中的常用API
min的博客
07-25 644
Promise常用的API，以及一些新增的API方法，Promise 构造函数，Promise.prototype.then，Promise.prototype.catch，Promise.resolve，reject，all，race，any，allSettled，Promise.prototype.finally，
Promise常用API介绍
qq_52788258的博客
11-13 2428
1.Promise构造函数: Promise (excutor){} 2.Promise.prototype.then方法:(onResolved, onRejected) =>{} 3.Promise.prototype.catch方法:(onRejected)=>{} 4.Promise.resolve方法: (value) =>{} 5.Promise.reject方法: (reason) =>{} 6.Promise.all方法:(promises)=> {} 7.Promise.race 方法
promise链式调用_纯手写 Promise，由浅入深
weixin_39561004的博客
12-06 579
本文原载于 SegmentFault社区作者：Yxaw现在很多面试也都要求我们有手动造轮子的能力，所以本篇文章我会以手动实现一个 promise 的方式来发掘一下 Promise 的特点。简单版Promise首先我们应该知道 Promise 是通过构造函数的方式来创建的 (new Promise( executor ))，并且为 executor 函数 传递参数:functionPr...
理解JavaScript中Promise的使用
11-23
在实际开发中，Promise 通常与 AJAX 请求、文件操作、定时任务等异步操作结合使用。例如，当我们使用 `fetch` API 进行网络请求时，会得到一个 Promise，然后可以使用 `then` 和 `catch` 来处理响应数据和错误。 ``...
js代码-Promise的理解
07-16
Promise.race()方法与Promise.all类似，但它会在数组中的任意一个Promise状态改变时立即改变返回Promise的状态，无论是fulfilled还是rejected。 ```javascript let promise1 = new Promise(function(resolve, ...
承诺：JS Promise API的Golang实现
02-16
现在，我们可以在Golang中使用这个Promise API来编写类似JavaScript的异步代码。例如： ```go p := NewPromise(func(done chan bool, result chan interface{}) { // 异步操作 go func() { value := doAsyncTask...
javaScript-timer:模块11-Promise API
05-26
在实际应用中，Promise还可以与async/await语法配合使用，使代码看起来更加同步和直观。async函数会返回一个Promise，await关键字用于等待Promise的结果。这使得编写异步代码变得更为简洁： ```javascript async ...
JS中promise化微信小程序api
01-20
现在，我们可以更优雅地使用Promise化后的API，如下所示： ```javascript promisify('getUserInfo') .then((res) => console.log(res)) .catch((err) => { console.error(err); }); promisify('navigateTo', {...
Promise对象基本API介绍
果车的博客
03-30 1485
目录 一、含义： 二、Promise对象的特点： 1、对象的状态不受外界影响。 2、一旦状态改变、就不会再变，任何时候都可以得到这个结果。 3、避免了层层嵌套的回调函数，解决回调地狱的问题。 三、基本用法： 1、Promise对象是一个构造函数，用来生成Promise的实例。 2、Promise实例生成以后，可以用then方法分别指定Resolved状态和Rejected状态的回调函数。 3、在Promise实例中调用resolve()或者reject()，应该在前面加上return.
常用的promise API
初郁
03-08 4396
Promise构造函数: Promise (excutor) {} excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明: excutor会在Promise内部立即同步回调,异步操作在执行器中执行 Promise.prototype.then方法: (onResolved, onRejected) ..
手写 Promise 全部 API 教程
frontend_frank的博客
02-22 343
前言我们在 上篇文章用了很大功夫实现了 Promise 的核心方法，并且通过了 Promises/A+ 官方872个测试用例测试，接下来实现这些静态方法已经是小菜一碟了，因为这些 API...
promise 的 API
最新发布
NXZ13419918873的博客
12-05 625
Promise.prototype.then : 实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果，then 中的函数一定要 return 一个结果或者一 个新的 Promise 对象，才可以让之后的 then 回调接收。Promise.race ：类方法，多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败。
Promise--相关的API
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-21 645
1. Promise相关的API 1.1 Promise 构造函数 Promise 构造函数: Promise (excutor) {} (1) executor 函数: 执行器 (resolve, reject) => {} (2) resolve 函数: 内部定义成功时我们调用的函数 value => {} (3) reject 函数: 内部定义失败时我们调用的函数 reason => {} 说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中
Promise自定义封装
Youle-Rose记录一些学习前端的知识和遇到的难点
01-31 2114
自己封装一次promise会有利于理解promise，而且在面试的时候，很大可能回问道关于promise的一些知识，甚至会手写
ES6 --- Promise深入学习（五）Promise 内置的6个API，all，allSettled，race，any，resolve/reject
秋天，黄叶坠地，凉风有信。
03-03 1147
Promise API 在 Promise 类中，有 6 种静态方法。我们在这里简单介绍下它们的使用场景。 Promise.all 假设我们希望并行执行多个 promise，并等待所有 promise 都准备就绪。 例如，并行下载几个 URL，并等到所有内容都下载完毕后再对它们进行处理。 这就是 Promise.all 的用途。 语法： let promise = Promise.all([...promises...]); Promise.all 接受一个 promise 数组作为参数（从技术上讲，它可
Promise常用API
weixin_37722222的博客
09-04 1575
Promise 的常用 API 如下： Promise.resolve(value) 类方法，该方法返回一个以 value 值解析后的 Promise 对象 1、如果这个值是个 thenable（即带有 then 方法），返回的 Promise 对象会“跟随”这个 thenable 的对象，采用它的最终状态（指 resolved/rejected/pending/settled） 2、如果传入...
Promise的常用api
weixin_43273592的博客
07-14 120
第一个完成。
Promise的理解
09-04
Promise是一种用于处理异步操作的机制，它可以容纳一个未来会结束的事件的结果。Promise具有三种状态：等待中（pending）、完成了（resolved）和拒绝了（rejected），一旦从等待状态变成其他状态，就无法再改变。 从语法上来说，Promise是一个对象，它提供了统一的API，可以用来处理各种异步操作。它的作用是解决回调地狱（callback hell）的问题，使得异步代码更加可读、可维护。 Promise的状态不受外界影响，它代表一个异步操作，并且只有异步操作的结果可以决定当前的状态。无论其他操作如何，都无法改变Promise的状态，这也是Promise的名称"承诺"的由来。 总结来说，Promise是一种用于处理异步操作的机制，它具有三种状态，提供了统一的API，并且能够解决回调地狱的问题。它的状态只由异步操作的结果决定，其他操作无法改变它的状态。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Promise理解及实现Promise](https://download.csdn.net/download/weixin_38499349/14046688)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [谈谈对Promise的理解](https://blog.csdn.net/hddlsj/article/details/123029117)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值