promise的基本使用

最新推荐文章于 2024-04-06 20:10:45 发布

路上捡来的博客

最新推荐文章于 2024-04-06 20:10:45 发布

阅读量128

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_42676335/article/details/115166354

版权

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Promise的出现的目的是解决异步编程中的地狱回调的问题。

1. 同步和异步

1.1 JS的事件循环机制

**事件循环机制：**主线程不断重复获得任务，执行任务的过程。

JS是一门单线程语言。HTML5提出新标准，允许JS创建多个线程，于是出现了同步和异步。

简单的理解：

**同步：**同步任务都在主线程上执行，形成了一个执行栈。比如烧水煮饭，等水开了（10分钟后），再去切菜。

异步：异步通过回调函数实现。回调函数添加到任务队列中。比如烧水煮饭，利用水烧开的十分钟时间先去切菜。

1.2 同步和异步的区别

	同步API	异步API
执行顺序	同步API从上到下依次执行，前面的代码会阻塞后面代码的执行	异步API不会等待API执行完成后再向下执行代码
获取返回值	同步API可以从返回值中拿到API的执行结果	异步API不可以

1.3 常见的异步任务类型

普通事件，如click,resize等等
资源加载，如load,error等等
定时器，如setInterval,setTimeout等
请求类型，需要回调执行的

1.1同步和异步.png

2. promise 的基本使用

由于多次异步调用的结果顺序不固定，异步调用结果如果存在依赖（即下一个异步调用需要在上一个异步任务执行完在执行）则需要进行嵌套，很容易造成回调地狱。

地狱回调图来自百度：

1.0网图地狱回调.png

Promise的出现就是为了解决异步调用嵌套的问题。

2.1promise的使用.png
执行结果：

2.1执行结果.png

2.1 Promise的三种状态

状态	说明
pending	等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill	满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject	拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

2.2 Promise常用API

1.实例方法

实例方法	说明
.then()	得到异步任务正确的结果
.catch()	获取异常信息
.finally()	成功与否都会执行（不是正确标准）

2.静态方法

静态方法	说明
.all()	用于并发处理多个异步任务，只有所有异步任务都执行完成了才能出结果
.race()	用于并发处理多个异步任务，只要其中一个异步任务执行完成就出结果。其他的异步任务会继续执行，但结果会被丢弃

.all方法详细说明：

promise.all方法接收一个数组作为参数，数组中的对象均为Promise实例（如果不是Promise实例，该项会被用Promise.resolve转为Promise实例)

ES11新增allSettled方法:
该方法与all方法不同，arr方法只有全部成功才会返回成功的promise。而allSettled不管如何都会返回成功。

.race()

Promise.race接收一个数组作为参数，数组中的实例有一个状态发生改变（编程fulfill或rejected）则将第一个改变状态的返回值传递回去，继续向下执行但不会再执行后面实例的回调。

2.3 Promise链式编程demo

2.3 Promise的demo.png
代码如下：

<!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>Document</title>
</head>

<body>
    <script>
        new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("你再干嘛");
                }, 2000);
            })
            .then((data) => {
                console.log(data); //打印你在干嘛
                return new Promise((resolve, reject) => {
                    resolve(data + ",我在吃饭.");

                    // 如果是reject()则后面的then不执行 直接跳到catch
                });
            })
            .then((data) => {
                console.log(data); //打印你在干嘛,我在吃饭

                // 如果接下来是同步任务 只需有 return Promise.resolve即可
                return Promise.resolve(data + "哦那我走了");
                //异常情况
                // return Promise.reject("异常了")
                // 或者手动抛出异常
                // throw "异常了";
            })
            .then((data) => {
                console.log(data);
            })
            .catch((err) => {
                //执行失败的回调
                console.log(err);
            });
    </script>
</body>

</html>

路上捡来的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
promise的基本使用

Promise的出现的目的是解决异步编程中的地狱回调的问题。1. 同步和异步1.1 JS的事件循环机制**事件循环机制：**主线程不断重复获得任务，执行任务的过程。JS是一门单线程语言。HTML5提出新标准，允许JS创建多个线程，于是出现了同步和异步。简单的理解：**同步：**同步任务都在主线程上执行，形成了一个执行栈。比如烧水煮饭，等水开了（10分钟后），再去切菜。异步：异步通过回调函数实现。回调函数添加到任务队列中。比如烧水煮饭，利用水烧开的十分钟时间先去切菜。1.2 同步和异步的区别
复制链接

扫一扫