第八讲_JavaScript的Promise

最新推荐文章于 2024-07-18 10:24:18 发布
最新推荐文章于 2024-07-18 10:24:18 发布
阅读量1.2k 收藏 15
点赞数 42
分类专栏： JavaScript 文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenqi1992/article/details/135951414
版权

JavaScript的Promise

1. Promise的概述

Promise 对象表示异步操作最终的完成（或失败）以及其结果值。

Promise 允许将处理程序与异步操作的最终成功值或失败原因关联起来，使得异步方法可以像同步方法一样返回值。

1.1 Promise的三种状态

Promise有三种状态，一旦状态从初始状态变成其他状态，就不会再改变。

  • 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
  • 已兑现（fulfilled）：操作成功。
  • 已拒绝（rejected）：操作失败。

1.2 Promise的实例方法

  • then()：Promise 被兑现时调用。
  • catch()：Promise 被拒绝时调用。
  • finally()：无论 Promise 是否被兑现还是被拒绝，处理器都会在 Promise 敲定时被调用。

1.3 Promise的基本使用

Promise的构造函数有两个参数。

  • resolve：被兑现时调用resolve函数
  • reject：被拒绝时调用reject函数
// 创建一个Promise对象
let promise = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    }, 1000);
} );

// 状态从 pending -> fulfilled 执行 then
// 状态从 pending -> rejected 执行 catch
// finally 总是会执行
promise.then(data => {
    console.log(data)
}).catch(err => {
    console.log(err)
}).finally(() => {
    console.log("finally")
});

2. Promise 链式调用

.then() 最多接受两个参数，第一个参数是 Promise 兑现时的回调函数，第二个参数是 Promise 拒绝时的回调函数。每个 .then() 返回一个新生成的 Promise 对象，这个对象可被用于链式调用。

// 创建一个Promise对象
let promise = new Promise( (resolve, reject) => {
  // 进行异步操作
  setTimeout( () => {
      let num = Math.ceil(Math.random() * 20);
      // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
      if (num > 10) {
          resolve(`${num} > 10，执行成功！`);
      } else {
          reject(`${num} <= 10，执行失败！`);
      }

  }, 1000);
} );


// 兑现的回调函数
function handleFulfilledA(data) {
  console.log(data);
  return new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }
  
    }, 1000);
  } );
}

// 拒绝的回调函数
function handleRejectedA(err) {
  console.log(err);
  return new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }
  
    }, 1000);
  } ); 
}

// 兑现的回调函数
function handleFulfilledB(data) {
  console.log(data);
}

// 拒绝的回调函数
function handleRejectedB(err) {
  console.log(err);
}

promise
.then(handleFulfilledA, handleRejectedA)
.then(handleFulfilledB, handleRejectedB)
.finally(() => {
  console.log("finally")
})

即使 .then() 缺少返回 Promise 对象的回调函数，处理程序仍会继续到链的下一个链式调用。

// 创建一个Promise对象
let promise = new Promise( (resolve, reject) => {
  // 进行异步操作
  setTimeout( () => {
      let num = Math.ceil(Math.random() * 20);
      // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
      if (num > 10) {
          resolve(`${num} > 10，执行成功！`);
      } else {
          reject(`${num} <= 10，执行失败！`);
      }

  }, 1000);
} );

promise
  .then((data) => {console.log(data); return data})
  .then((data) => {console.log(data); return data})
  .then((data) => console.log(data))
  .catch((err) => console.log(err))

3. Promise 并发

Promise 类提供了四个静态方法来促进异步任务的并发。

3.1 all方法

all() 方法在所有传入的 Promise 都被兑现时兑现；在任意一个 Promise 被拒绝时拒绝。

let promise1 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    }, 1000);
} );

let promise2 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    }, 1000);
} );

// promise1 和 promise2 都从 pending -> fulfilled 走 then，接收到一个数组，装着所有 Promise 的返回
// promise1 和 promise2 其中一个从 pending -> rejected 走 catch
Promise
    .all([promise1, promise2])
    .then((data) => {
        console.log(data);
    }).catch((err) => {
        console.log(err);
    })

3.2 race 用法

race() 方法只要有一个异步执行完成，不管是兑现还是拒绝就执行回调，其余的都不再执行回调。

let promise1 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    },1000 );
} );

let promise2 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    },1000 );
} );

Promise
  .race([promise1, promise2])
  .then((data) => console.log(data))
  .catch((err) => console.log(err))

3.3 allSettled 用法

allSettled() 方法需要所有异步执行结束，返回一个数组，装着所有 Promise 的执行结果。

let promise1 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    },1000 );
} );

let promise2 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        // num > 10 时走兑现逻辑，num <= 10 时走拒绝逻辑
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    },1000 );
} );

Promise
    .allSettled([promise1, promise2])
    .then((data) => {
        let success = data.filter((item) => item.status === "fulfilled");
        let fail = data.filter((item) => item.status === "rejected");
        console.log(success);
        console.log(fail);
    });

3.4 any 用法

any() 方法只要有一个异步成功，就走 then；否则走 catch。

let promise1 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    },1000 );
} );

let promise2 = new Promise( (resolve, reject) => {
    // 进行异步操作
    setTimeout( () => {
        let num = Math.ceil(Math.random() * 20);
        if (num > 10) {
            resolve(`${num} > 10，执行成功！`);
        } else {
            reject(`${num} <= 10，执行失败！`);
        }

    },1000 );
} );

Promise
    .any([promise1, promise2])
    .then((data) => {
        console.log(data);
    }).catch((err) => {
    	// AggregateError对象，对象包含一个errors属性，值是数组类型，装着Promise的返回
        console.log(err.errors);
    });
文大奇Quiin
关注
  • 42
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri
10-01
8. **错误处理与调试**：学习如何有效地处理JavaScript和Ajax请求中的错误，以及使用浏览器的开发者工具进行调试，是提升开发效率和代码质量的重要环节。 9. **jQuery与Ajax**：jQuery是一个流行的JavaScript库，...
第11章 JavaScript的应用_javascript_
09-29
8. **Web API**：浏览器提供的Web API，如Fetch API、WebSocket、Geolocation API等，使得JavaScript可以访问硬件设备、网络通信、地理位置等信息，进一步扩展了其在网页应用中的可能性。 通过本章的学习，你将了解...
JavaScript进阶（二十）：精解 ES6 Promise 用法_javascript promise使用
2401_84437604的博客
04-26 787
复杂难懂概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么呢？是类？对象？数组？函数？别猜了，直接打印出来看看。这么一看就明白了，Promise是一个构造函数，自己身上有allrejectresolve这几个眼熟的方法，原型上有thencatch等同样很眼熟的方法。这么说，用出来的对象肯定就有thencatch方法。//做一些异步操作console.log('执行完成');resolve('随便什么数据');}, 2000);});
(84)Wangdao.com第十八天_JavaScript Promise 对象
aof26372的博客
10-19 129
Promise 对象 是JavaScript 的异步操作解决方案，为异步操作提供统一接口。 目前 JavaScript 原生支持 Promise 对象 它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。 Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。 Promise 是一个对象，也是...
JavaScript进阶（二十五）：Promise 详解_vue promise
2401_85124786的博客
06-10 118
【代码】JavaScript进阶（二十五）：Promise 详解_vue promise。
JavaScript promise
weixin_48387470的博客
06-25 1038
promise三种状态 成功的 fulfilled/resolve 失败的 reject 等待中 pendding处理promise返回结果有两种方式 .then =>Promise返回一个成功的promise的时候。
JavaScript 之 promise
原来是有理数
01-21 1709
一文掌握 promise 用法~JavaScript 之 promise： 异步任务的处理 | Promise | Promise 解决异步处理 | Promise 的代码结构 | Executor | resolve 传递不同值的区别 | then 方法 | catch 方法 | finally 方法 | resolve 方法 | reject 方法 | all 方法 | allSettled 方法 | race 方法 | any 方法 | 手写 Promise
JavaScript 33. Promise
爱死亡机器人
09-29 467
Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。本文主要介绍JavaScript(JS)中Promise，以及相关的使用方法，以及示例代码。Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
详解Promise使用_promise获取数据
kOS0ym的博客
05-01 1015
在我们调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成兑现 (fulfilled)在之后我们去调用reject时，已经不会有任何的响应了(并不是这行代码不执行，而是无法改变Promise的状态)
10 个 JavaScript Promise 的面试题
m0_61643133的博客
11-29 1618
虽然 setTimeout 和 Promise.resolve() 是同时完成的，甚至 setTimeout 的代码还是领先的，但是由于它的优先级低，属于它的回调函数是在后面执行的。所以在上面的代码中，Promise.then 的回调函数会在第二个 setTimeout 的回调函数之前执行，因为它是一个微任务，已经被切线了。这是我们最后一个挑战，如果你能正确说出这段代码的输出结果，那么你对 Promise 的理解就已经很强了，同类型的面试题根本难不倒你。这是一个非常困难的问题。实际上，这种说法是错误的。
JavaScript高级 Promise
ximingx
11-15 649
JavaScript Promise
JavaScript高级_javascript_zip_
10-03
在本压缩包文件"JavaScript高级_javascript_zip_"中，可能包含了关于JavaScript高级主题的详细教程或课程资料，特别是"day10_JavaScript高级"这一子文件，可能是该系列学习的第十天内容，集中讲解了一些核心的高级...
JavaScript_javascript_
09-30
以上只是JavaScript基础知识的一部分，深入学习还包括错误处理、异步编程、Promise、async/await、模块化、性能优化、前端框架（如React、Vue、Angular）等内容。对于新手而言，理解并掌握这些基础概念是成为熟练...
Promise_html_js_typescript_Promise_
10-01
相反，Promise.race会立即返回第一个完成（无论成功或失败）的Promise的结果。其他Promise的结果不会影响这个返回的Promise。 8. **Promise.resolve()和Promise.reject()** 这两个静态方法用于创建已解决或已拒绝...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 430
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 348
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 155
只要掌握了这些react技能，基本就可以熟练使用react了
现代Web开发的JavaScript框架：第二版
"《Apress.JavaScript.Frameworks.for.Modern.Web.Development.2nd.Edition.pdf》这本书是关于现代Web...本书第二版更新了最新的技术和趋势，对于想要提升JavaScript框架和库知识的开发者来说，是一本宝贵的参考资料。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值