位置: 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自定义导航栏渐变)

  • 城建附加的计税依据
  • 个人退税需要多少天
  • 税款代码
  • 研发费用加计扣除是什么意思啊
  • 投标保证金保险怎么买
  • 关税消费税增值税计算公式
  • 主营业务收入增长率计算公式
  • 发票中奖要交税吗
  • 二次股权转让的股权原值确认
  • 驾驶培训费可以报销吗
  • 已认证的进项税额转出如何操作
  • 公司交的拍卖费计入哪个会计科目?
  • 不动产折旧费计算公式
  • 营业外支出计入
  • 模具可以申请专利吗
  • 新产品开发费用怎么扣除
  • 房地产公司缴纳契税的会计分录
  • 3个点的发票有哪些
  • 交际应酬费用
  • 发票付款证明怎么写
  • 企业取得的土地使用权用于出租或增值目的时
  • 劳务报酬所得的收入额
  • 待报解地方预算收入怎么做账
  • 联想笔记本电脑官网旗舰店
  • 企业支付工商年费怎么查
  • 出口退税率和进项一致吗
  • 冲减多计提的工会经费调账说明
  • 财政拨款事业单位和全额事业单位
  • 收到的增值税专用发票如何认证
  • 收到银行电子汇票已入账怎么做账
  • 在国内和国外
  • 股东个人财产转让流程
  • 电脑数据恢复怎么用
  • php字符串型数据的定义方式
  • 薏米红豆粥的做法视频
  • 金融机构拆出资金的最长期限
  • 工业企业采购供应管理
  • 医院个人缴费什么意思
  • php pdo sqlserver
  • 微信小程序授权管理在哪里
  • 一次开票分期确认怎么弄
  • lvs命令详解
  • Linux下socket实现网页抓取 Unicorn 博客频道 CSDN.NET
  • 三代手续费企业所得税
  • 销售使用过的车辆应该如何交增值税
  • ubuntu系统安装教程
  • 厂房改造费用算固定资产吗
  • sqlserver 判断函数
  • 小规模公司累计增值税
  • 加工企业怎么做账务处理
  • 继续教育报名方式
  • 员工报销的差旅费会计分录
  • 什么情况下需要异地预缴增值税
  • 公允价值变动损益
  • 土地前期开发费用属于开发成本吗
  • 工程挂靠取得的收入怎么做账?
  • 加强备案管理
  • 公司变更名字后,公账怎么办
  • 事业单位收个人所得税吗
  • 接受捐赠收入如何计入收入
  • 关于mysql数据库服务登录下列描述正确的是
  • MySQL-group-replication 配置步骤(推荐)
  • cf分屏不全屏
  • thinkpad x230笔记本电脑
  • 怎么快速
  • win10如何删除pin登录密码
  • .exe是什么软件
  • mac怎么找自己下载的应用
  • windows 7中,执行应用程序的方法有哪几种?
  • linux html编辑器
  • linux有哪几种安装方式
  • unity发布exe
  • js移动到指定位置
  • jquery购物车商品价格计算
  • 详细解读退役军人优待政策
  • js修改地址栏参数但不让他跳转
  • jquery的实现原理
  • js设计模式有什么用
  • 没有单位怎么交职工养老保险
  • 福建省国税局领导班子介绍
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设