首页 > 其他分享 >promise

promise

时间:2024-10-18 16:15:11浏览次数:1  
标签:异步 调用 函数 Promise promise 回调

Promise

  • promise是ES6引入的异步编程的新的解决方案,从语法上来说,它是一个构造函数,可以实例化对象,封装异步操作,获取成功和失败的结果,其优点是支持链式调用可以解决回调地狱问题指定回调函数的方式更为灵活

1.准备

  • promise是ES6引入的进行异步编程的新的解决方案,从语法上来说,它就是一个构造函数,可以封装异步的任务,并且可以对结果进行处理,promise最大的好处在于可以解决回调地狱的问题,并且它在指定回调与进行错误处理这块要更加的灵活与方便,而且promise在现代的项目当中无论是web还是app的项目当中都应用的十分广泛,无论是前端还是后端都可以看到promise的身影。

异步编程

  • fs文件操作
  • 数据库操作
  • AJAX
  • 定时器

2.Proise介绍与基本使用

2.1 Promise 是什么?

2.1.1 理解

  1. 抽象表达
  • Pormise 是一门新的技术(ES6规范)
  • Promise 是JS中进行异步编程的新的解决方案
  • 备注:旧方案是单纯使用回调函数
  1. 具体表达
  • 从语法上来说:Promise是一个构造函数
  • 从功能上来说:Promise对象用来封装一个异步操作并可以获取其中成功/失败的结果

2.1.2 Promise 的状态改变

  • 实例对象中的一个属性 [PromiseState]
    • pending 未决定的
    • resolved/fullfilled 成功
    • rejected 失败
  • 实例对象中的另一个值 [PromiseResult]
    • 保存着对象异步任务成功/失败的结果
  1. pending 变为resolved
  2. pending 变为rejected
  • 说明:只有这两种,且一个promise对象只能改变一次,无论变为成功还是失败,都会有一个结果数据,成功的结果一般称为value,失败的结果一般称为reason

2.1.3 Promise的基本流程

  • new Promise()[pending状态]
  • 执行异步操作
    • 成功了,执行resovle()
      • promise对象[resolved状态]
      • 回调onResolved()[then]
      • 新的promise对象
    • 失败了,执行reject()
      • promise对象[rejected状态]
      • 回调onRejected()[then()/catch()]
  • 新的Promise对象

2.2 为什么要用Promise?

2.2.1 指定回调函数的方式更加灵活

  1. 旧的:必须在启动异步任务前指定
  2. promise:启动异步任务=>返回Promise对象=>给Promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

2.2.2 支持链式调用,可以解决回调地狱问题

  1. 什么是回调地狱
  • 回调函数嵌,外部回调函数异步执行的结果是嵌套的回调执行的条件
  1. 回调地狱的缺点
  • 不便于阅读
  • 不便于异常处理
  1. 解决方案?
  • promise链式调用

2.3 如何使用Promise?

2.3.1 API

  1. Promise 构造函数:Promise(executor){}
  • executor函数:执行器(resolve,reject)=>{}
  • resovle函数:内部定义成功时我们调用的函数value=>{}
  • reject函数:内部定义失败时我们调用的函数reson=>{}
  • 说明:executor会在Promise内部立即同步调用,异步操作在执行器中执行
  1. Promise.prototype.then 方法:(onResolved,onRejected)=>{}
  • onResolved函数:成功的回调函数(value)=>{}
  • onRejected函数:失败的回调函数(reason)=>{}
  • 说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调,返回一个新的promise对象
  1. Promise.prototype.catch方法:(onRejected)=>{}
  • onRejected函数:失败的回调函数(reason)=>{}
  1. Promise.resolve方法:(value)=>{}
  • value:成功的数据或promise对象
  • 说明返回一个成功/失败的promise对象
  1. Promise.reject 方法:(reason)=>{}
  • reason:失败的原因
  • 说明:返回一个失败的promise对象
  1. Promise.all方法:(promises)={}
    • promises:包含n个promise的数组
    • 说明:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败
  2. Promise.race方法:(promises)=>{}
  • promises:包含n个promise的数组
  • 说明:返回一个新的promise,第一个完成的promise的结果状态就是最终的结果状态

2.3.2 promise的几个关键问题

  1. 如何改变promise的状态?
  • resolve(value):如果当前是pending就会变为resolved
  • reject(reason):如果当前是pending就会变为rejected
  • 抛出异常:如果当前是pending就会变为rejected
  1. 一个promise指定多个成功/失败回调函数,都会执行吗?
  • 当promise改变为对应状态时都会调用
  1. 改变promise状态和指定回调函数谁先谁后?
  • 都有可能,正常情况下是先指定回调再改变状态,但也可以先改变状态再指定回调
  • 如何先改变状态再指定回调?
    • 在执行器中直接调用resovled()/rejected()
    • 延迟更长时间才调用then
  • 什么时候才能得到数据?
    • 如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
    • 如果先改变的状态,那当指定回调时,回调函数就会调用,得到数据
  1. Promise.then() 返回的新promise的结果状态由什么决定?
  • 简单表达:由then()指定的回调函数执行的结果决定
  • 详细表达:
    • 如果抛出异常,新的promise改变为rejected,reason为抛出的异常
    • 如果返回的是非promise的任意值,新Promise变为resolved,value为返回的值
    • 如果返回的是另外一个新Promise,此Promise的结果就会称为新Promise的结果
  1. promise如何串连多个操作任务?
  • Promise的then()返回一个新的Promise,可以形成then()的链式调用
  • 通过then的链式调用串连多个同步/异步任务
  1. Promise异常穿透
  • 当使用promise的then链式调用时,可以在最后指定失败的回调
  • 前面任何操作出了异常,都会传到最后失败的回调中处理
  1. 中断promise链?
  • 当使用Promse的then链式调用时,在中间中断,不再调用后面的回调函数
  • 办法:在回调函数中返回一个pendding状态的Promise对象

4.async 与 await

4.2 async 函数

  1. 函数的返回值为promise对象
  2. promise对象的结果由async函数执行的返回值决定

4.3 await 表达式

  1. await右侧的表达式一般为promise对象,但也可以是其他的值
  2. 如果表达式是promise对象,await返回的是promise成功的值
  3. 如果表达式是其他值,直接将此值作为await的返回值

4.4 注意

  1. await必须卸载async函数中,但async函数中可以没有await
  2. 如果await的promise失败了,就会抛出异常,需要通过try...cantch捕获处理

标签:异步,调用,函数,Promise,promise,回调
From: https://www.cnblogs.com/lgz-94/p/18162954

相关文章

  • 挑战1000道javascript手写题之实现Promise.all(9)
    Promise.all介绍Promise.all方法接收一个数组作为参数,这个参数数组的元素也都是promise实例,该方法返回一个promise示例。constp=Promise.all([p1,p2,p3]);p的状态由p1、p2、p3决定,p最后的状态要么是变成fulfilled,要么变成rejected。变成fulfilled:只有当p1、p2、p3......
  • [Javascript] Write Promise.all()
    Promise.myAll=function(promises){letres,rej;constp=newPromise((resolve,reject)=>{res=resolve;rej=reject;});leti=0;letresult=[];//sincePromise.allcantakeanyiterableasinput//tocheckwhether......
  • 第147篇:开发中Promise的使用(async,await)
    好家伙, 0.错误描述今天在开发中犯了一个比较严重的错误对于Promise的错误使用 场景:微信小程序中展示搜索条件列表//API请求工具函数constapiRequest=(url,method='GET',headers={})=>{returnnewPromise((resolve,reject)=>{wx.request({......
  • 深入理解 JavaScript 异步:掌握 Promise、Async/Await 与 Promise.all 全指南
    博文:深入理解JavaScript中的Promise、await、.then()和Promise.all()在现代JavaScript中,处理异步操作时,Promise、async/await和Promise.all()是关键工具。本文将深入讲解它们的用法及实现,并结合实际例子。1.Promise的基本使用Promise是一种处理异步操作的方式。......
  • C++异步调用 future async promise packaged_task
    背景:C++异步调用是现代C++编程中的一种重要技术,它允许程序在等待某个任务完成时继续执行其他代码,从而提高程序的效率和响应性。C++11引入了std::async、std::future和std::promise等工具,使得异步编程变得更加方便和直观。以下是关于C++异步调用的详细介绍,包括基本概......
  • JS异步编程精通之路(一):Callback、Promise、Async/Await 和 Observable 深度对比
    在现代JavaScript编程中,异步操作是常见且必不可少的部分。处理异步的方式多种多样,其中最常见的有Callback、Promise、Async/Await,以及近年来随着响应式编程(ReactiveProgramming)理念兴起的Observable。本文将对这几种异步处理方式进行对比,帮助你理解它们各自的优缺点,以......
  • JavaScript中Promise学习
    Promise是强大的异步编程工具,它允许我们更好的管理和处理异步操作。这里将探讨Promise中的reject以及如何使用catch来处理异步错误 什么是promise?promise是一种代表异步操作最终完成或失败的对象。它有三种状态:1、Pending(进行中):初始状态,既不成功也不失败2、Fulfilled(已成......
  • 异步场景: promise、async函数与await命令介绍
    如果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下方名片,关注公众号,公众号更新更快,同时也有更多学习资料和技术讨论群。在鸿蒙的开发中,我们时常会遇到promise异步场景,有同学反馈说希望提一下。异步开发这部分的内容比较多,我不确定这位朋友具体想讨论是哪些方面,那我从......
  • 手写 p-map(控制并发数以及迭代处理 promise 的库)
    介绍p-map是一个迭代处理promise并且能控制promise执行并发数的库。作者是sindresorhus,他还创建了许多关于promise的库promise-fun,感兴趣的同学可以去看看。之前提到的p-limit也是一个控制请求并发数的库,控制并发数方面,两者作用相同,不过p-map增加了对请求(promise)......
  • HarmonyOs DevEco Studio小技巧24--异步编程(Promises、async/await)
    异步编程:调用后耗时,不阻塞代码继续执行,将来完成后,触发回调函数传递结果异步编程的范畴:网络请求(如使用 fetch 或 XMLHttpRequest 发送HTTP请求获取数据)。文件读写操作(读取或写入本地文件)。数据库操作(查询、插入、更新、删除数据)。定时器函数(如 setTimeout 和 setInt......