Promise API

最新推荐文章于 2023-05-25 10:42:28 发布
最新推荐文章于 2023-05-25 10:42:28 发布
阅读量114 收藏
点赞数
分类专栏： js 文章标签： javascript html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34870529/article/details/120414454
版权

1、Promise.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.all()</title>
</head>

<body>
    <script>
        const f1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('first');
            }, 3000)
        });

        const f2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('second');
            }, 2000)
        });

        const f3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('third');
            }, 1000)
        });

        // const f4 = Promise.reject('err');

        Promise.all([f1, f2, f3]).then(res => {
            console.log(res); // ['first', 'second', 'third']   出现reject，无结果输出
        });
    </script>
</body>

</html>

2、Promise.allSettled()

<!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.all()</title>
</head>

<body>
    <script>
        const f1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('first');
            }, 3000)
        });

        const f2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('second');
            }, 2000)
        });

        const f3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('third');
            }, 1000)
        });

        // const f4 = Promise.reject('err');

        Promise.all([f1, f2, f3]).then(res => {
            console.log(res); // ['first', 'second', 'third']   出现reject，无结果输出
        });
    </script>
</body>

</html>

3、Promise.any()

<!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.any()</title>
</head>

<body>
    <script>
        const f1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('first');
            }, 3000)
        });

        const f2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('second');
            }, 2000)
        });

        const f3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('third err');
            }, 500)
        });

        const f4 = Promise.reject('err');

        const f5 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('five err');
            }, 100)
        });

        Promise.any([f1, f2, f3, f4, f5]).then(res => {
            console.log(res); //  second   获得resove用时最短得结果不会受reject影响
        });
    </script>
</body>

</html>

4、Promise.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.race()</title>
</head>

<body>
    <script>
        const f1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('first');
            }, 1000)
        });

        const f2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('second');
            }, 500);
        });

        const f3 = Promise.reject('err');

        const f4 = Promise.resolve('fourth');

        Promise.race([f1, f2, f3, f4]).then(res => {
            console.log(res); // second first    获得reject之前得结果，用时短的结果先输出
        });
    </script>
</body>

</html>

5、Promise.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.resolve()</title>
</head>

<body>
    <script>
        const promise = Promise.resolve('success');

        promise.then(res => {
            console.log(res);
        });
    </script>
</body>

</html>

6、Promise.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.reject()</title>
</head>

<body>
    <script>
        const promise = Promise.reject('err');
        promise.catch(res => {
            console.log(res);
        });
    </script>
</body>

</html>

7、Promise.prototype.then()  Promise.prototype.catch()  Promise.prototype.finally()

<!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.prototype.then()、Promise.prototype.catch()、Promise.prototype.finally()</title>
</head>

<body>
    <script>
        const myPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('foo');
                // reject('err');
            }, 300);
        });

        myPromise
            .then(res => {
                console.log(res)
            }, err => {
                console.log(err)
            })
            .catch(err => {
                console.log(err)
            })
            .finally(() => {
                console.log('finally')
            })
    </script>
</body>

</html>

炉火纯青-旺
关注
专栏目录
【JS】Promise中包含setTimeout/setInterval时的resolve触发
爆爆爆炸beng
03-16 3728
前提： 1.假设函数f1和f2异步执行，f1和f2在promise中被调用 2.f1执行所需的时间不确定，且f1中有可能会有其他异步操作 问题： 无法确定f1所处的Promise对象中，resolve返回的正确位置 解决方案： 基本的f1和f2代码段如下： var f1=function(){ setTimeout(function(){ console.log('t...
promise、setTimeout混搭的 JavaScript 运行机制
湾湾叉会儿腰的博客
12-21 513
promise、setTimeout混搭的 JavaScript 运行机制 笔试题总考，一次又一次再见面的兄弟 promise 和 setTimeout真让人欲罢不能（雾）。真的受不了每次浑水摸鱼猜（真实），这次看了各有趣的总结，在此做个总结！！ 参考： https://juejin.im/post/59e85eebf265da430d571f89#heading-3 首先先要知道 promi...
Promise 中 setTimeout 的使用
热爱思考、活力满满、开朗爱笑的年轻人
02-29 1万+
promise
promise和setTimeout的执行机制
kar98km416的博客
05-25 650
由于JavaScript是单线程执行，当主线程执行完当前所有任务后才会去任务队列中取出任务执行。另外，值得注意的是，当setTimeout的时间设为0时，相当于直接将目标函数加入到了任务队列中，但它的执行顺序也会受到当前主线程任务的影响。MacroTask和MicroTask的执行流程是一个交替执行的过程，代码块执行的时候，按顺序放入异步任务，如果检测到MicroTask，那么将执行它，第一个异步任务结束后会检查是否有同类任务，如果有就继续执行，没有则检查另一类任务是否存在，直至异步任务全部执行完毕。
关于promise的一些小事情
Rookie_Rookieone的博客
04-21 280
promise的优点和缺点 优点：promise能解决ajax请求过程中回调地狱的问题（那么问题又来了，什么是回调地狱？？？），也能使代码简洁化。 缺点：首先，无法取消promise，一旦新建就会立即执行，无法取消。其次，如果不设回调函数，promise内部的错误的无法抛出。最后，当处于pending状态时，无法得知当前进展到哪一个阶段。 回调地狱 ...
promise api
最新发布
05-27
Promise API 是 JavaScript 中的一个异步编程解决方案，用于处理异步操作并返回结果。它主要由三个方法组成：`Promise.resolve(value)`、`Promise.reject(reason)` 和 `Promise.prototype.then(onFulfilled, ...
promise API
05-17
Promise API 是 JavaScript 中的一个异步编程解决方案，用于处理异步操作并返回结果。它主要由三个方法组成：`Promise.resolve(value)`、`Promise.reject(reason)` 和 `Promise.prototype.then(onFulfilled, ...
承诺：JS Promise API的Golang实现
02-16
在JavaScript中，Promise API是一种处理异步操作的重要工具，它为复杂的异步代码提供了一种更有序、可读性更强的编程方式。Promise允许我们定义一个异步操作的初始状态，以及成功或失败时的回调函数。而在Golang中，...
PromiseAPI.js
06-10
PromiseAPI.js API 传递参数
delay:setTimeout的Promise API
05-16
setTimeout API。 它具有与模块相同的功能，但全部以打字稿编写。 安装 $ yarn add delay.ts 用法 import delay , { delayReject , delayThen , delayCatch } from 'delay.ts' ; delay ( 3 * 1000 , 'some value' ...
通过Promise + setTimeout，实现JavaScript 的同步延迟简单示例
lt_xiaodou的博客
08-24 3052
过去在写 JavaScript 使用的同步延迟时，都是用非同步的 setTimeout 加上 callback 来实现，但如果有很多个任务或流程要执行，就得用上一大堆的 callback，然而 JavaScript 里的 Promise ，刚好就可以用来解决同步与非同步的问题，让整个延迟的过程可以很漂亮简洁且同步的「串」在一起。
括号生成（给出 n 代表生成括号的对数，请你写出一个函数，使其能够生成所有可能的并且有效的括号组合。）
be_gin_ner的博客
05-24 4240
给出n代表生成括号的对数，请你写出一个函数，使其能够生成所有可能的并且有效的括号组合。 例如，给出n=3，生成结果为： [ "((()))", "(()())", "(())()", "()(())", "()()()" ] public class Test0524 { public static void main(String[] a...
LeetCode22.括号生成 JavaScript
weixin_34014277的博客
02-17 139
给出 n 代表生成括号的对数，请你写出一个函数，使其能够生成所有可能的并且有效的括号组合。 例如，给出 n = 3，生成结果为： [ "((()))", "(()())", "(())()", "()(())", "()()()" ] 答案参考： /** * @param {number} n * @return ...
生成有效的括号组合
王文强的博客
07-23 1264
/*给出 n 代表生成括号的对数，请你写出一个函数，使其能够生成所有可能的并且有效的括号组合。括号只有{}[]()这三种。 例如，给出 n = 3，生成结果为： [ "((()))", "(()())", "(())()", "()(())", "()()()" ]*/ import java.util.ArrayList; import java.util.Li...
setTimeout(fn,0)和Promise.resolve()区别
honey_seve7n的博客
02-11 995
一、js的异步任务运行机制 （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。 （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。 （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入...
promise和setTimeout执行顺序的问题
热门推荐
积少成多
04-23 1万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 promise为es6引进的语言标准，为异步编程的一种解决方案； 阅读此文的前提是了解promise的基本用法和特性，比如他自执行特性、状态不可逆特性等 抛出问题 且看下面代码和问题 setTimeout(function(){console.log(1)},0); new Promise(fu...
浅拷贝深拷贝之理解及应用场景
qq_34870529的博客
05-15 1万+
首先，浅拷贝和深拷贝都是只针对于像Object，Array这样的复杂对象。 区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制 一：理解 1、浅拷贝：简单的说，浅拷贝就是增加了一个指针指向已存在的内存（JavaScript并没有指针的概念，这里只是用于辅助说明），钱凯被只是拷贝了内存地址，子类的属性指向的是父类属性的内存地址，当子类的属性修改后，父类的属性也随...
JS 模板字符串三种写法
qq_34870529的博客
04-13 7832
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
HTML CSS JS 实现弹窗
qq_34870529的博客
04-18 7664
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值