Promise快速入门

最新推荐文章于 2023-02-14 10:16:50 发布

Hound1211

最新推荐文章于 2023-02-14 10:16:50 发布

阅读量271

点赞数

分类专栏： Web开发文章标签： Promise JavaScript 异步操作链式调用

本文链接：https://blog.csdn.net/ManyPeng/article/details/100880553

版权

本文介绍了Promise的基本概念和用法，包括同步与异步的区别，Promise的三种状态，以及如何创建和使用Promise。重点讲解了.then()和.catch()方法，以及Promise.all()和Promise.race()的使用场景。通过实例展示了Promise在处理异步操作中的优势和链式调用的特点。

摘要由CSDN通过智能技术生成

Promise快速入门

什么是Promise

Promise对象代表一个异步操作，它用来声明一个尚未完成且预计在未来完成的异步操作

同步和异步

同步

同步模式其实也就是单线程模式，在最早期的网页设计中，只有同步模式，所以你可能会看到进入一个网页的时候浏览器一直处于加载状态好几分钟的情况。就是因为它是单线程的，一个资源或者一个操作没有做完就不会继续往下处理，导致线程阻塞，整个页面都卡主。

例如下面的例子，在同步模式下需要等待睡眠之后才能执行打印操作，因为一个耗时很长的操作导致后面的程序都要等待执行，会给用户带来很不好的体验，因此异步模式应运而生。

const a = 1;
sleep(10000000);
console.log(a);

异步

异步模式与同步模式相反，它允许同时执行多个任务，函数调用后不会立刻将结果返回。最常见的异步模式就是setTimeout这个的函数了。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function testTimeout() {
   
                setTimeout(function() {
   
                console.log("in setTimeout");
                }, 0);
                console.log("out setTimeout");
            }
        </script>
    </head>
    <body>
        <button onclick="testTimeout();">测试timeout</button>
    </body>
</html>

执行结果如下：
在这里插入图片描述
可以看到，虽然testTimeout函数在前面，而且定时器的延时设置为0了，但是仍然先打印了后面的out setTimeout。这是由于setTimeout函数是异步执行的，异步任务会在当前所有的同步任务执行结束之后在执行。如果有面的同步任务中产生了错误或者有死循环存在，前面的"in setTimeout"可能永远不会打印出来。

Promise的基本使用方法

promise的状态

promise代表了一个当前未完成，在将来某个时间会完成的操作，它具有三种状态：pending（初始值），fulfilled（操作成功），rejected（操作失败）。
promise的状态可以从pending变为fulfilled或者从pending变为rejected，而且一旦promise的状态改变了，就不能在改变。

promise的基本结构

promise概述

promise通过new 关键字创建一个Promise对象，其中这个对象创建时会传入一个函数作为参数，这个函数的参数为resolve和reject，这两个函数就是回调函数（具体什么是回调函数本文不再做过多介绍，百度一下，你就知道哦）。
resolve函数作用：在定义的异步操作执行成功时将结果作为它的参数传递出去给外部使用；
reject函数作用：在定义的异步操作执行失败时将错误信息作为它的参数传递出去给外部使用；

创建promise

创建promise的格式如下

const promise = new Promise(function (resolve, reject) {
   
    // do something...
    if (执行成功) {
   
        resolve(result);
    } else {
   
        reject(errMsg);
    }
});

通过then函数执行后续操作

promise在定义之后通过**.then**来指定resolve和reject的回调函数，例子接上文中promise的定义

promise.then(function (data){
   
    // do something...
}, function (errMsg) {
   
    // do something...
});

.then方法会返回一个Promise对象，then方法包含两个参数，一个是Promise对象从pending变为fulfilled状态时执行的函数，一个是Promise对象从pending变为rejected状态时执行的函数，这两个函数都以从Promise对象传出的值作为参数进行一些操作。此处的例子中就是从定义中传出的data和errMsg数据作为参数。
完整例子如下如下：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function testTimeout() {
   
                setTimeout(function() {
   
                console.log("in setTimeout");
                }, 0);
                console.log("out setTimeout");
            }
            function testPromise() {
   
                const promise = new Promise(function (resolve, reject) {
   
                    // setTimeout
                    setTimeout(function () {
   
                        // 执行成功, 将数据123传递出去
                        resolve("123")
                    }, 2);
                });
                promise.

最低0.47元/天解锁文章

Hound1211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Promise快速入门

Promise快速入门什么是Promise同步和异步同步异步什么是PromisePromise对象代表一个异步操作，它用来声明一个尚未完成且预计在未来完成的异步操作同步和异步同步同步模式其实也就是单线程模式，在最早期的网页设计中，只有同步模式，所以你可能会看到进入一个网页的时候浏览器一直处于加载状态好几分钟的情况。就是因为它是单线程的，一个资源或者一个操作没有做完就不会继续往下处理，...
复制链接

扫一扫