一起来学习javascript-Promise

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量508 收藏 17
点赞数 5
文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74762754/article/details/139636259
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

 <button οnclick="test">点击</button>

</body>

</html>

<script>

// Promise 是 JavaScript 中的一个对象，用于异步计算的一个解决方案，以更易于管理和维护的方式处理异步操作，避免了传统的回调地狱（callback hell）问题。Promise代表一个现在、将来或永远可能可用，或者永远不会可用的值。

// 基本概念

// 状态：Promise有三种状态——pending（等待中）、fulfilled（已成功）和rejected（已失败）。状态一旦从pending变为fulfilled或rejected，就不会再改变。

// 构造函数：创建Promise实例需要通过new Promise(executor)，其中executor是一个函数，接受两个参数resolve和reject，分别在异步操作成功和失败时被调用。

// 在JavaScript的世界中，所有代码都是单线程执行的。

// 由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

function add(){

    console.log("我要过一会儿在执行add函数")

}

console.log('before setTimeout()');

 setTimeout(add,3000)// 3秒钟后调用add函数

console.log('after setTimeout()');

// 这种情况则是体现异步的过程,边执行边等待

// 写一个异步函数

// 生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败：

function test(resolve, reject) {

    var timeOut = Math.random() * 2;

   console.log('set timeout to: ' + timeOut + ' seconds.');

    setTimeout(function () {

        if (timeOut < 1) {

           console.log('call resolve()...');

            resolve('200 OK');

        }

        else {

            console.log('call reject()...');

            reject('timeout in ' + timeOut + ' seconds.');

        }

    }, timeOut * 1000);

}

// resolve, reject这里是两个函数作为参数，

// 下面是在test()函数中调用的函数，在使用Promise对象时需要将其注释掉

// test(

//     function (result) { // 成功的回调

//         console.log('Success:', result);

//         //如果timeOut<1， console.log('call resolve()...');,我们将调用resolve('200 OK'),此时result=200 OK

//     },

//     function (error) { // 失败的回调

//         console.error('Error:', error);

//         //如果timeOut!=1，console.log('call reject()...');我们将调用reject('timeout in ' + timeOut + ' seconds.')。此时error=timeout in timeOut seconds.

//     }

// );

// 可以看出，test()函数只关心自身的逻辑，并不关心具体的resolve和reject将如何处理结果。

// 有了执行函数，我们就可以用一个Promise对象来执行它，并在将来某个时刻获得成功或失败的结果

// 链式调用：通过.then()和.catch()方法可以进行链式调用，处理Promise的结果或错误。

var p1 = new Promise(test);

var p2 = p1.then(function (result) {

    console.log('成功：' + result);

});

var p3 = p2.catch(function (reason) {

    console.log('失败：' + reason);

});

// 或者

// p1.then(function (result) {

//     console.log('成功：' + result);

// }).catch(function (reason) {

//     console.log('失败：' + reason);

// });

// 或者直接用promise对象进行异步操作

// let promise = new Promise((resolve, reject) => {

//   // 异步操作

// });

// resolve: 当异步操作成功完成时调用的函数，用来改变Promise的状态为fulfilled（已成功），并将操作的结果作为参数传递出去。

// reject: 当异步操作失败或者遇到错误时调用的函数，用来改变Promise的状态为rejected（已失败），并将错误原因作为参数传递出去。

// 完整示例代码

// new Promise(function (resolve, reject) {

//     log('start new Promise...');

//     var timeOut = Math.random() * 2;

//     log('set timeout to: ' + timeOut + ' seconds.');

//     setTimeout(function () {

//         if (timeOut < 1) {

//             log('call resolve()...');

//             resolve('200 OK');

//         }

//         else {

//             log('call reject()...');

//             reject('timeout in ' + timeOut + ' seconds.');

//         }

//     }, timeOut * 1000);

// }).then(function (r) {

//     log('Done: ' + r);

// }).catch(function (reason) {

//     log('Failed: ' + reason);

// });

// Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。

// 要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：

// job1.then(job2).then(job3).catch(handleError);


 

// 0.5秒后返回input*input的计算结果:

// function multiply(input) {

//     return new Promise(function (resolve, reject) {

//         log('calculating ' + input + ' x ' + input + '...');

//         setTimeout(resolve, 500, input * input);

//     });

// }

// // 0.5秒后返回input+input的计算结果:

// function add(input) {

//     return new Promise(function (resolve, reject) {

//         log('calculating ' + input + ' + ' + input + '...');

//         setTimeout(resolve, 500, input + input);

// 因此，当resolve函数在500毫秒后被调用时，它会接收到一个参数，该参数是input值的两倍（因为input + input）。

//     });

// }

// var p = new Promise(function (resolve, reject) {

//     log('start new Promise...');

//     resolve(123);

// });

// p.then(multiply)

//  .then(add)

//  .then(multiply)

//  .then(add)

//  .then(function (result) {

//     log('Got value: ' + result);

// });


 

// setTimeout可以看成一个模拟网络等异步执行的函数。现在，我们把上一节的AJAX异步执行函数转换为Promise对象，看看用Promise如何简化异步处理：

// ajax函数将返回Promise对象:

// function ajax(method, url, data) {

//     var request = new XMLHttpRequest();

//     return new Promise(function (resolve, reject) {

//         request.onreadystatechange = function () {

//             if (request.readyState === 4) {

//                 if (request.status === 200) {

//                     resolve(request.responseText);

//                 } else {

//                     reject(request.status);

//                 }

//             }

//         };

//         request.open(method, url);

//         request.send(data);

//     });

// }

// var log = document.getElementById('test-promise-ajax-result');

// var p = ajax('GET', '/api/categories');

// p.then(function (text) { // 如果AJAX成功，获得响应内容

//     log.innerText = text;

// }).catch(function (status) { // 如果AJAX失败，获得响应代码

//     log.innerText = 'ERROR: ' + status;

// });


 

// 有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：

// var p1 = new Promise(function (resolve, reject) {

//     setTimeout(resolve, 500, 'P1');

// });

// var p2 = new Promise(function (resolve, reject) {

//     setTimeout(resolve, 600, 'P2');

// });

// Promise.race([p1, p2]).then(function (result) {

//     console.log(result); // 'P1'

// });

// 由于p1执行较快，Promise的then()将获得结果'P1'。p2仍在继续执行，但执行结果将被丢弃。

// 如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

</script>

小胡想找到工作
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript-promise-book
02-20
本教程基于"javascript-promise-book"的PDF版本，旨在深入讲解Promise的概念、用法以及最佳实践。 Promise在ES6中被正式引入，作为一个对象，它代表了值的未来状态——可能是已知的（即已解析），未知的（即还在...
javascript-promise-thunk-example-deferred:许诺重击的例子
04-29
在"javascript-promise-thunk-example-deferred"这个项目中，开发者可能将Promise与thunk结合起来，以创建一种更灵活的异步处理方式。例如，他们可能会定义一个thunk函数，该函数接收一个Promise的`resolve`和`...
JavaScript-Promise的使用及详细解释
莫莫
07-01 2152
JavaScript-Promise的使用及详细解释案例使用多种方法实现以下案例第一种---setTimeout嵌套第二种---封装函数Promise详解小案例第三种---使用Promise来实现最开始的案例Promise---具体使用的案例第一版---点击按钮显示图片第二版---加载出第一张之后在加载其他，依次加载第三版---图片中谁先加载完成，谁就先显示第四版---等待图片全部加载完毕，所有图片一起显示封装Jsonp 案例 使用多种方法实现以下案例 案例目标 “你好”----2秒后输出 “你笑起来真好
一起来学习javascript- async
m0_74762754的博客
06-13 506
/ await: 在async函数内部，可以使用await关键字等待Promise的结果。// 通过结合使用async/await，可以编写更加直观、易于理解和维护的异步代码，避免了传统的回调地狱(callback hell)，提升了开发效率和代码质量。// 关键字async用于声明一个异步函数，而await关键字则用于等待一个Promise的结果，使得你可以像操作同步代码那样等待异步操作完成。// 用await调用另一个异步函数，写起来和同步代码没啥区别，但执行起来是异步的。// 调用async函数。
【JavaScript】手写Promise
编码世界
05-15 4331
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
从0开始学习JavaScript--JavaScript使用Promise
晓晓的天空
11-21 702
Promise是JavaScript中处理异步编程的一种现代解决方案，通过简洁的语法和丰富的方法提供了更好的编程体验。通过本文的介绍，读者应该对Promise的基本概念、链式调用、、错误处理以及与的结合有了更全面的了解。未来，随着JavaScript语言的发展，异步编程的解决方案可能会进一步演进，但Promise作为当前主流的解决方案，将在很长一段时间内继续发挥着重要作用。
es6---Promise
muzidigbig的博客
10-20 4483
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大 回调函数 回调地狱 Promise.then()参数 Promise.all() Promise.allSettled() Promise.race() Promise.any() Promise.withPesolvers() Promise链中断方法 async/await Promise 高级用途的技巧
JS-29-Promise对象
qq_31532983的博客
04-15 1035
Promise对象、setTimeout函数、clearTimeout函数
JavaScript之异步 - Promise (一)
小蚂蚁的世界
06-05 2026
JavaScript之异步 - Promise (一) 1. 背景 从前面的文章中得到回调表达程序异步和管理并发的两个主要缺陷：缺乏顺序性和可信任性。 回忆一下，我们用回调函数来封装程序中的 continuation，然后把回调交给第三方（甚至可能是外部代码），接着期待其能够调用回调，实现正确的功能。从之前的文章中也可以看到存在着信任问题。 但是，如果我们能够把控制反转再反转回
JavaScript——promise(一）基础篇
Rice_w的博客
10-07 2532
什么是promise呢？Promise是一个对象，他代表了一个异步操作的最终完成或者失败。本质上Promise是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要一开始把回调函数作为参数传入这个函数了实际上Promise与现实生活中的承诺非常相似。在现实生活中呢，我们通常是这样理解Promise的：承诺（保证）某人会做某事或者某事的发生。也就是要给将来多要发生的事一个承诺，但是谁都不能保证这件事一定会能够按照理想状态发生。
javaScript-timer:模块11-Promise API
05-26
在JavaScript编程语言中，Promise API 是一个至关重要的概念，它被广泛用于处理异步操作。在"javaScript-timer:模块11-Promise API"这个主题中，我们主要探讨的是如何利用Promise来实现计时器功能，特别是倒计时器。...
javascript-advanced:深入学习JavaScript
06-12
8. async/await：基于Promise的async函数和await关键字，使得异步代码看起来更像同步，提高代码可读性。 四、DOM操作 9. DOM API：学习如何通过JavaScript操作文档对象模型（DOM），包括元素的选择（getElementById...
thats-a-promise:JavaScript 中的异步模式
06-19
"thats-a-promise"是一个项目，它深入探讨了JavaScript中的异步模式，尤其是Promise对象的使用。Promise是ES6引入的一种解决回调地狱问题的新方法，使得异步代码更易于理解和维护。 ## 1. 异步编程基础 在...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 383
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 178
vue 自定义滚动条同步拖动（移动端）
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 231
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 693
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
封装一个promise.all
09-17
### 回答1： Promise.all是JavaScript中的一个方法，用于将多个Promise对象封装成一个新的Promise对象。它接受一个Promise对象数组作为参数，返回一个新的Promise对象。当所有Promise对象都成功时，新的Promise对象也会成功，并返回所有Promise对象的返回值组成的数组。如果有任意一个Promise对象失败，新的Promise对象也会失败，并返回第一个失败的Promise对象的错误信息。 示例: ``` Promise.all([promise1, promise2, promise3]) .then((values) => { console.log(values); }) .catch((error) => { console.log(error); }); ``` ### 回答2： 对于这个问题，我将提供一个300字的回答来介绍如何封装一个 Promise.all函数。 Promise.all是一个用于处理多个 Promise 对象的静态方法，它接受一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。当传入的 Promise 对象数组中的所有 Promise 对象都变为 resolved 状态时，这个新的 Promise 对象才会被 resolve，并传递一个包含所有 resolved 值的数组。如果传入的 Promise 对象数组中有任一一个 Promise 对象被 reject，则新的 Promise 对象将被 reject，并传递第一个 reject 值。 要封装一个 Promise.all函数，我们可以创建一个新的 Promise 对象，并在其中进行相关的处理逻辑。首先，我们需要判断传入的参数是否为一个 Promise 对象数组，如果不是，则直接返回一个被 reject 的 Promise 对象，并传递一个对应的错误信息。 接下来，我们可以使用一个计数器来统计所有 Promise 对象的 resolved 状态。我们可以使用一个变量来保存所有 resolved 值，并在每个 Promise 对象 resolve 时将其添加到这个变量里。同时，在任何一个 Promise 对象被 reject 时，我们需要立即 reject 整个新的 Promise 对象，并传递对应的 reject 值。 最后，当所有 Promise 对象都变为 resolved 状态时，我们可以 resolve 新的 Promise 对象，并传递保存的所有 resolved 值。 总结起来，封装一个 Promise.all函数需要进行参数验证、计数器和变量的初始化、处理每个 Promise 对象的 resolved 和 reject 状态，并最终返回一个新的 Promise 对象。这个过程可以通过创建一个匿名函数，使用上述逻辑来实现。这样我们就能够使用封装好的 Promise.all函数来处理多个 Promise 对象的结果了。 ### 回答3： Promise.all 是 JavaScript 中的一个方法，它接收一个 Promise 数组作为参数，并在所有 Promise 都完成时返回一个新的 Promise 对象。 如果要封装一个 Promise.all 方法，可以采用以下的方式： ```javascript function myPromiseAll(promises) { return new Promise((resolve, reject) => { let results = []; let counter = 0; if (promises.length === 0) { resolve(results); } else { for (let i = 0; i < promises.length; i++) { promises[i].then((result) => { results[i] = result; counter++; if (counter === promises.length) { resolve(results); } }).catch((error) => { reject(error); }); } } }); } ``` 这个方法首先创建一个新的 Promise 对象，并接收一个 promises 数组作为参数。然后创建一个空数组来存储每个 Promise 的结果，以及一个计数器来跟踪已完成的 Promise 数量。 接下来，判断传入的 promises 数组是否为空。如果为空，直接使用 resolve 返回空数组。 如果 promises 数组不为空，循环遍历数组中的每个 Promise 对象。当每个 Promise 对象都调用了 then 方法时，将该 Promise 的结果存储到 results 数组的对应位置中，并增加计数器的值。当计数器的值等于 promises 数组的长度时，说明所有 Promise 已经完成，此时使用 resolve 返回结果数组。 如果其中任意一个 Promise 出现错误，则使用 catch 方法将错误传递给新的 Promise 对象，并使用 reject 返回错误。 这样，我们就成功封装了一个 Promise.all 方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值