位置: IT常识 - 正文

【Promise】一文带你了解promise并解决回调地狱(promise thenable)

编辑:rootadmin
【Promise】一文带你了解promise并解决回调地狱 文章目录Promise为什么需要promise需求回调地狱Promise的基本使用promise实例promise的状态promise状态的改变promise的结果promise方法then方法通过then方法获取promise的结果then方法的返回值catch方法解决回调地狱Promise为什么需要promise需求

推荐整理分享【Promise】一文带你了解promise并解决回调地狱(promise thenable),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:promise.all.then,promise to write,promise to promise,promised by,promise. then,promised by,promise to write,promise. then,内容如对您有帮助,希望把文章链接给更多的朋友!

通过ajax请求id,再根据id请求用户名,再根据用户名获取email

<!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> <script src="./jquery-3.6.0.js"></script></head><body> <script> //通过ajax请求拿到用户id $.ajax({ type:"GET", url:"./data1.json", success:function(res){ let {id} = res; console.log(id); //通过用户id找到用户名 $.ajax({ type:"get", url:'./data2.json', data:{id}, success:function(res){ let {username} = res; console.log(username); //通过用户名找到用户邮箱 $.ajax({ type:"GET", url:"./data3.json", data:{username}, success:function(res){ let {email} = res; console.log(email); } }) } }) } }) </script></body></html>回调地狱

在回调函数中嵌套回调 在上述代码中通过不断请求数据,代码逐级向外递归,形成了回调地狱。 使用promise就可以完美解决,并且让我们的代码更加美观。

Promise的基本使用

Promise是一个构造函数,通过new关键字实例化对象. 语法:

new promise((reso1ve,reject)=>{})

Promise接受一个函数作为参数 在参数函数中接受两个参数

resolve:reject:promise实例

promise实例有两个属性:

state:状态result:结果 promise的状态pending(准备,待解决,进行中)fulfilled(已完成,成功)rejected(已拒绝,失败)promise状态的改变

通过调用resolve和reject改变当前promise对象的状态。

改为fulfilledlet p = new Promise((resolve,reject)=>{resolve(); //调用resolve将状态改为fulfilled});console.log(p)

改为rejectedlet p = new Promise((resolve,reject)=>{ reject();//调用reject将状态改为rejected });console.log(p)

注意:promise状态的改变是一次性的,即不能同时调用resolve和reject,若同时调用则状态只改变一次。

promise的结果

promise的结果是通过传递resolve/reject的参数来获得的

let p = new Promise((resolve,reject)=>{ resolve("成功") })console.log(p);

【Promise】一文带你了解promise并解决回调地狱(promise thenable)

同理,reject也是如此:

promise方法then方法

then方法中有两个参数,且都为函数作为参数。 如:

let p = new Promise((resolve,reject)=>{ resolve("成功") })p.then(()=>{ console.log('成功时执行');},()=>{ console.log("失败时执行");})console.log(p);第一个函数参数 当promise的状态为fulfilled时,执行该函数第二个函数参数 当promise的状态为rejected时,执行该函数

通过then方法获取promise的结果

通过then方法中的函数传递形参即可获得promise的结果;

let p = new Promise((resolve,reject)=>{ resolve("成功")})p.then((value)=>{ console.log('成功时执行',value);},(reason)=>{ console.log("失败时执行",reason);})console.log(p);

总结:promise的状态用来判断then方法执行成功或是失败的函数,promise的结果则是作为实参传递给then方法的函数参数的形参。

then方法的返回值

then方法返回的为一个新的promise对象。且该promise对象的状态为pending,then方法为一个同步操作,then中的函数参数为异步操作。

如上图我们就可以看到then方法的返回值仍然为一个promise对象,且在刚生成该对象时的状态为pending。

由此衍生出了链式操作:

new Promise(()=>{}).then().then()

在该操作中,如果promise对象的状态不改变则不会执行then方法中的函数。那么在then方法返回的promise对象中如何让其状态改变呢??

使用return可以将then方法返回的promise对象状态改为fulfilled。在then方法中书写错误代码,即可将其promise对象状态改为rejected

实例:

let p = new Promise((res,rej)=>{res('苏凉');})let t = p.then((value)=>{ return "name:"+value;},(reason)=>{ console.log("执行失败!");})t.then((value)=>{ console.log(value);},(reason)=>{ console.log(reason);})console.log(t);

catch方法

catch方法在promise对象的状态为rejected时亦或者是输入错误代码时被调用,并返回错误原因。

let p = new Promise((res,rej)=>{ throw newError("出错啦!")})p.catch((reason)=>{ console.log(reason);})console.log(p);

解决回调地狱//封装Ajax请求函数function getAjax(path,data){ return new Promise((resolve,reject)=>{ $.ajax({ type:'get', url:path, data:{data}, success:function(res){ resolve(res) }, error:function(res){ reject(res) } }) })}getAjax('./data1.json').then((value)=>{ let id = {value}; return getAjax("./data2.json",id)}).then((value)=>{ let {username} = value; return getAjax('./data3.json',username)}).then((value)=>{ console.log(value);})

本文链接地址:https://www.jiuchutong.com/zhishi/298703.html 转载请保留说明!

上一篇:【AIGC】大模型协作系统 HuggingGPT 深度解析(dac模型)

下一篇:uniapp自定义导航渐显渐隐效果实现(uniapp自定义导航栏渐变)

  • 苹果xs突然不能向上划屏解锁(苹果xs突然不能快充)

    苹果xs突然不能向上划屏解锁(苹果xs突然不能快充)

  • ipad录屏失败(ipad录屏失败怎么回事)

    ipad录屏失败(ipad录屏失败怎么回事)

  • 接受cookie是什么意思(接收cookie)

    接受cookie是什么意思(接收cookie)

  • 网易云音乐包有什么用(网易云音乐包有成长值吗)

    网易云音乐包有什么用(网易云音乐包有成长值吗)

  • e城e家蓝牙卡怎么换电池(e城e家蓝牙卡异常,请到当地营业厅办理)

    e城e家蓝牙卡怎么换电池(e城e家蓝牙卡异常,请到当地营业厅办理)

  • qq号身份证可以改绑吗(qq号身份证可以更换吗)

    qq号身份证可以改绑吗(qq号身份证可以更换吗)

  • 亚马逊会员试享后可取消吗(亚马逊试用会员怎么开)

    亚马逊会员试享后可取消吗(亚马逊试用会员怎么开)

  • 华为手机铃声在哪下载(华为手机铃声在哪里设置来电铃声在哪里设置)

    华为手机铃声在哪下载(华为手机铃声在哪里设置来电铃声在哪里设置)

  • 手机无法录音是怎么回事(手机无法录音是什么情况)

    手机无法录音是怎么回事(手机无法录音是什么情况)

  • 360路由器密码重置(360路由器密码重置方法)

    360路由器密码重置(360路由器密码重置方法)

  • 5g升级包什么意思(5g升级包是什么)

    5g升级包什么意思(5g升级包是什么)

  • 数据网络已暂停下载是什么意思(数据网络已暂停下载怎么办)

    数据网络已暂停下载是什么意思(数据网络已暂停下载怎么办)

  • 为什么微信删除了对方还可以发信息(为什么微信删除账单需要人脸识别)

    为什么微信删除了对方还可以发信息(为什么微信删除账单需要人脸识别)

  • 抖音私信别人能看见吗(抖音私信别人能监控吗)

    抖音私信别人能看见吗(抖音私信别人能监控吗)

  • 宽带运营商提供的账号和密码是什么(宽带运营商提供的账号密码忘了怎么办)

    宽带运营商提供的账号和密码是什么(宽带运营商提供的账号密码忘了怎么办)

  • 微信正在输入为什么有的人没有(微信正在输入为什么关不掉)

    微信正在输入为什么有的人没有(微信正在输入为什么关不掉)

  • 华为mate30闪退怎么办(华为mate30总闪退)

    华为mate30闪退怎么办(华为mate30总闪退)

  • 笔记本电脑过安检会损坏吗(笔记本电脑太卡了怎么解决)

    笔记本电脑过安检会损坏吗(笔记本电脑太卡了怎么解决)

  • 如何用iphone8拍夜景(苹果8拍照技巧教程视频)

    如何用iphone8拍夜景(苹果8拍照技巧教程视频)

  • vnsaloo是什么型号(voos是什么意思)

    vnsaloo是什么型号(voos是什么意思)

  • 华为mate30手机的扫描功能在哪里(华为mate30手机的回收站在哪里打开)

    华为mate30手机的扫描功能在哪里(华为mate30手机的回收站在哪里打开)

  • 充电器pd啥意思(充电器 pd qc)

    充电器pd啥意思(充电器 pd qc)

  • 抖音定位会经常出错吗(抖音定位老是变动是什么情况)

    抖音定位会经常出错吗(抖音定位老是变动是什么情况)

  • 苹果xr的录音在哪里(xr的录音在哪)

    苹果xr的录音在哪里(xr的录音在哪)

  • 抖音最长能发多长时间的视频(抖音最长能发多少分钟)

    抖音最长能发多长时间的视频(抖音最长能发多少分钟)

  • 同一操作系统中安装多个不同版本谷歌Chrome浏览器(操作系统不同)

    同一操作系统中安装多个不同版本谷歌Chrome浏览器(操作系统不同)

  • 怎么获得最新Win10 21H2激活密钥 21H2激活码分享 附激活工具(怎么获得最新医学类指南)

    怎么获得最新Win10 21H2激活密钥 21H2激活码分享 附激活工具(怎么获得最新医学类指南)

  • 一般纳税人增值税申报操作流程
  • 怎么算一般纳税人
  • 事业单位怎么给分
  • 银行本票与银行本票存款的区别
  • 营销策划合同需要缴纳印花税吗
  • 服务费发票税率1%
  • 出口免税不退税会计分录
  • 向投资者支付的股息红利等权益性投资收益款项
  • 有进项发票还用交税
  • 季报利润表本期数
  • 一般劳务报酬和税收区别
  • 票据贴现的账务处理案例
  • 行政单位的存货是什么
  • 库存商品盘盈盘亏表
  • 算项目人工成本的公式
  • 土地增值税预缴税率
  • 贸易公司买进卖出
  • 建筑业增值税税率11变为10
  • 发票记账联丢失怎么写情况说明
  • 办理金税盘需要多少钱
  • 印花税新法
  • 工费经费用计提吗
  • 个人偶然所得捐赠扣除标准
  • 企业不动产如何带抵押转让
  • 公允价值与计税价值区别
  • 库存商品在贷方怎么调回借方
  • macOS Big Sur 11.0.1(20B29)正式版发布(附可使用的Mac机型)
  • windows10如何更改时间
  • linux系统授权命令
  • explorer.exe是啥意思
  • PHP:curl_multi_exec()的用法_cURL函数
  • kcleaner.exe是什么
  • keyemain.exe是什么
  • 年终奖一般发什么奖品
  • 农村土地承包经营权证丢失怎么补办
  • php ftp函数
  • 学生兼职收入按什么交个税
  • 待抵扣进项税额什么意思
  • 企业和单位往来怎么做账
  • 【深度学习】目标检测的性能评价指标,mAP_0.5,mAP_0.5,0.95,0.05
  • 4、nerf(pytorch)
  • mkfifo命令
  • 企业购买机器设备没有发票怎么办
  • get请求有哪些
  • 防洪保安资金可以抵扣个税吗
  • 发生售后维修领用材料分录
  • 固定资产折旧率如何计算
  • day14-HTTP01
  • macos装mysql
  • sqlserver2008r2数据库导出教程
  • Mysql存储过程中的如何遍历一个查询结果集
  • 业务招待费的列支范围
  • 固定资产后续支出
  • 企业发生的职工福利费支出,不超过工资
  • 银行印鉴变更申请书范本
  • 投资软件和信息技术服务业
  • 确认应付职工薪酬如何计算
  • 股权支付会计处理
  • 已认证未抵扣的进项税转出账务处理
  • 餐饮打包盒 标准
  • 施工单位月末都需要结转什么
  • 原股东决定
  • 企业进行短期投资的目的包括
  • mysql优化技巧实战
  • linux监视内存详细信息命令
  • windows7 设置
  • mac电脑怎么打开
  • 双液浆常用配合比
  • 注意 Win/WP8.1开发者账户现已迁移到全新Win10开发者中心仪表盘
  • win7旗舰版系统激活码
  • cocos2djs
  • 手机摇一摇插件
  • unity移动方法
  • nodejs co
  • 开源 android 播放器
  • jquery trigger函数执行两次的解决方法
  • 如何动态加载外部文件
  • 税务机关落实六保六稳
  • 税务安装软件
  • 公租房要钱吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设