当前位置: 首页 > article >正文

promise的作用

为什么要用promise、它的作用是什么、解决了什么问题?

1、Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码;让代码更加的直观。

2、有了Promise对象,就可以将异步操作以同步的操作的流程表达出来,避免了层层嵌套的回调函数。

总结:就是可以将原先不可控的回调通过promise转为更加可控、更加清晰、更加高效、更便于维护。

一、案例讲解

接下来从0开始理解:比如我们想要延迟1秒执行一段代码,于是就把这段代码写到一个定时器里,这个定时器里的回调函数就是一个异步操作。

setTimeout(()=>{
    console.log('我想在1秒后执行这行代码')
},1000)

但我们还想要等这段代码执行完时执行别的代码,可我们不知道这段代码什么时候执行完,那怎么办?凭直觉讲,那就直接把别的代码写到那段代码后面就行了呗,像这样:

setTimeout(()=>{
    console.log('我想在1秒后执行这行代码')
    console.log('我想在前面的执行完之后执行')
},1000)

看似轻松地解决了问题,但如果别的代码还是一个异步操作呢

setTimeout(()=>{
    console.log('我想在1秒后执行这行代码')
    setTimeout(()=>{
        console.log('我想在前面的执行完后2秒执行')
    },2000)
},1000)

显而易见,会一层套一层。之前写socket编程时,会有很多的异步网络请求,就这样各种嵌套回调,代码变得很复杂,也更难维护。同时,每一个异步函数的执行上下文(作用域)就被限制在这个setTimout的回调里面了,多个回调之间就难以建立联系。

Promise是怎么通知我们异步操作结束了的呢?来实践一下。

先把我们的异步操作放到Promise对象里面去:

let p = new Promise(
    (resolve, reject)=>{
        setTimeout(()=>{
            console.log('我想在1秒后执行这行代码')
        },1000)
    }
)

在new这个Promise时,构建器函数(就是(resolve,reject)=>{})也会立即开始执行,我们的异步操作也就在其中执行了。不过这看起来好像和之前的方式没什么区别呀,就是放到了一个对象里面嘛。不着急,来看构造器函数的参数:resolvereject函数(由JavaScript引擎定义好的),这就是Promise的用处所在,这两个函数就是一个“通知”,来告诉我们异步操作的状态,我们在上述代码中做出修改:

let p = new Promise(
    (resolve, reject)=>{
        setTimeout(()=>{
            console.log('我想在1秒后执行这行代码')
            resolve()
        },1000)
    }
)

这里在第5行增加了一个resolve(),一旦执行了resolve(),就相当于发出了一个通知说“这个异步操作完成啦”,这个通知写在哪里是由你来定的,不过当然是要在异步操作执行结束后进行通知啦(这里不展开讲reject()了,同理)。那么,虽然通知发出去了,别的代码(console.log('我想在前面的执行完之后执行'))怎么知道上一个异步操作执行结束了呢?这就需要接收到那个通知,then()就是负责接收通知的,一旦resolve()了,就会进入then()里面,把别的代码写到then()里面就可以啦!(关于then的参数以及与catch的异同不展开了)

let p = new Promise(
    (resolve, reject)=>{
        setTimeout(()=>{
            console.log('我想在1秒后执行这行代码')
            resolve()
        },1000)
    }
).then(
    ()=>{console.log('我想在前面的执行完之后执行')}
)

而回调嵌套回调的代码也解开了嵌套,变成了:

let p = new Promise(
    (resolve, reject)=>{
        setTimeout(()=>{
            console.log('我想在1秒后执行这行代码')
            resolve()
        },1000)
    }
).then(
    ()=>{
        setTimeout(()=>{
            console.log('我想在前面的执行完后2秒执行')
        },2000)
    }
)

这就是Promise的作用所在了。


http://www.kler.cn/a/15040.html

相关文章:

  • 使用MaxKB搭建知识库问答系统并接入个人网站(halo)
  • 23种设计模式-备忘录(Memento)设计模式
  • Pandas学习
  • 环形缓冲区 之 STM32 串口接收的实现
  • 【第七节】在RadAsm中使用OllyDBG调试器
  • nodejs入门(1):nodejs的前后端分离
  • huggingface下载的.arrow数据集读取与使用说明
  • 初学者入门C语言指针与链表
  • CVE漏洞复现-CVE-2019-11043-PHP-FPM 远程代码执行漏洞
  • 地热井监测控制系统解决方案
  • 适用于Windows PC和Mac的最佳录屏软件Camtasia2023强悍来袭
  • C++设计模式21:策略模式
  • 如何高质量的提问题让chatgpt更明白我们的意图
  • delphi JSON用法
  • static_cast、dynamic_cast和reinterpret_cast区别和联系
  • 最好用的六款虚拟机软件,赶紧收藏
  • SAP-选择实施离散制造模式还是重复制造模式?
  • Java 版企业工程项目管理系统平台(三控:进度组织、质量安全、预算资金成本、二平台:招采、设计管理)
  • 根据字符出现频率排序、从英文中重建数字----2022/4/25
  • 直击德国PLS展,联诚发倾力打造沉浸式视觉盛宴!
  • 上传了ipa但iTunes Connect没有构建版本问题
  • 巧用千寻位置GNSS软件|逐点放样应用技巧
  • U盘安装Windows11和ubuntu20.04双系统
  • 如何平衡倾斜摄影的三维模型轻量化数据文件大小和质量效果?
  • 设计模式-门面模式
  • BM38-在二叉树中找到两个节点的最近公共祖先