ES6:Promise详解

2023-11-08

1、概念

Promise是JS中进行异步编程的新解决方案,相比回调函数和事件更合理和更强大。
从语法上来说:Promise是一个构造函数
从功能上说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

2、Promise有3种状态

  1. pending:初始状态也叫等待状态
  2. resolved:成功状态
  3. rejected:失败状态

状态一旦改变,就不会再变。创造promise实例后,它会立即执行。

3、Promise和async和await的区别

什么是async/await?
async/await 是ES7提出的基于Promise的解决异步的最终方案。
区别:
1 promise是ES6,async/await是ES7
2 async/await相对于promise来讲,写法更加优雅
3 reject状态:
1)promise错误可以通过catch来捕捉,建议尾部捕获错误,
2)async/await既可以用.then又可以用try-catch捕捉
一个函数如果加上 async ,那么该函数就会返回一个 Promise
async 和 await 可以说是异步终极解决方案了,相比直接使用 Promise 来说,优势在于处理 then 的调用链,能够更清晰准确的写出代码,毕竟写一大堆 then 也很恶心,并且也能优雅地解决回调地狱问题。当然也存在一些缺点,因为 await
将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

4、Promise API

  1. Promise.resolve(value) 类方法,该方法返回一个以 value 值解析后的 Promise 对象
  • 如果这个值是个 thenable(即带有 then 方法),返回的 Promise 对象会“跟随”这个 thenable的对象,采用它的最终状态(指 resolved/rejected/pending/settled)
  • 如果传入的 value 本身就是 Promise 对象,则该对象作为 Promise.resolve 方法的返回值返回。
  • 其他情况以该值为成功状态返回一个 Promise对象。
  1. Promise.reject 类方法,且与 resolve 唯一的不同是,返回的 promise 对象的状态为 rejected。
  2. Promise.prototype.then 得到异步任务的正确结果
  3. Promise.prototype.catch 获取异常信息
  4. Promise.prototype.finally 成功或失败都会执行
  5. Promise.all() 接受Promise对象组成的数组作为参数,它的返回参数也是数组。当promise的全部为resolve后,它才会进入.then()方法,只要有一个promise为reject,它就会进入.catch()并发处理多个异步任务,所有任务都能执行完成才能得到结果。
  6. Promise.race() 接受的参数与Promise.all()一样,不同的是,它会辨别最快达到resolve或者reject的promise对象,如果这个最快是resolve,则进入.then()方法,如果是reject,则进入.catch()方法并发处理多个异步任务,只要有一个任务完成就能得到结果。

5、Promise是用来解决两个问题的:

★ 支持链式调用,可以解决回调地域问题
回调地狱:回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱缺点:不便于阅读;不便于异常处理
★ 指定回调函数的方式更加灵活

6、Promise的三个缺点

1)无法取消Promise,一旦新建它就会立即执行,无法中途取消
2)如果不设置回调函数,Promise内部抛出的错误,不会反映到外部
3)当处于pending(等待)状态时,无法得知目前进展到哪一个阶段,是刚刚开始还是即将完成

7、Promise的两个特点

1)Promise对象的状态不受外界影响
2)Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆

8、Promise异步调用实例

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
    	resolve('OK');
    }, 1000);
});

p.then(value => {
    console.log(111);
    //有且只有一个方式(返回一个pending状态的Promise对象)
    return new Promise(() => {});
}).then(value => {
	console.log(222);
}).then(value => {
	console.log(333);
}).catch(reason => {
	console.warn(reason);
});

9、Promise、async、await执行顺序

async function async1(){
	console.log('async1 start')	//2  
    // 执行async2函数的 setTimeout
    await async2()
    setTimeout(function(){
        // 等上面执行完在执行
        console.log('setTimeout1')//8
	},0)
}		
async function async2(){
    setTimeout(function(){
    	console.log('setTimeout2')//7
    },0)
}
console.log('script start')//1    //执行同步代码
setTimeout(function(){
    // 最后执行setTimeout
    console.log('setTimeout3')//6
},0)
async1()  			//调用 
//执行先执行同步 输出2

// 调用
// 执行异步setTimeout
new Promise(function(r,j){
	console.log('Promise1')//3  //按照代码顺序
	r()
}).then(function(){
    // 等主线任务完成在执行
    console.log('Promise2')//5
})
console.log('script end')//4

10、Promise实例

console.log("start");

setTimeout(()=>{
	console.log("setTimeout");
},0);
    
new Promise((resolve,reject)=>{
	for(var i=0;i<5;i++){
    	console.log(i);
    }
    resolve() //修改promise状态为成功
}).then(()=>{
    console.log("promise回调函数");
})

console.log("end");
第一个宏任务队列
执行主线程上的代码
第二个宏任务
setTimeout
微任务队列
new Promise.then()
1、先执行主线程上的同步代码,输出start
2、遇到setTimeout将其加入到宏任务队列等待执行
3、遇到promise 立即执行,输出 01234
4、遇到promise的回调函数将其加入到微任务队列
5、执行主线程的同步代码,输出end
6、第一个宏任务队列执行完毕查看存在微任务队列,执行微任务队列中的任务,输出promise的回调函数
7、微任务执行完毕,执行下一个宏任务队列中的任务,输出setTimeout
输出:
start
0
1
2
3
4
end
promise回调函数
setTimeout
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ES6:Promise详解 的相关文章

随机推荐

  • nodejs + pkg+ puppeteer 路径问题以及 Passed function is not well-serializable 问题

    最近在使用 puppeteer 写自动化程序 发现几个问题在这里吧解决方案分享给大家 pkg 打包后的路径问题 具体路径详情看 https blog csdn net u012211003 article details 112872859
  • jQuery Dialog 弹出层对话框插件演示

    原文地址 http blog csdn net fer ba article details 7067352 dialog jquery function iframe class filter 目录 基本操作 默认的 html view
  • 【Java比较学习】重写equals方法的安全写法

    重写equals方法的正确打开方式 正文开始 Assassin 目录 重写equals方法的正确打开方式 1 什么是equals方法 1 1 equals方法 2 为什么要重写equals方法 2 1 举个例子吧 3 分析equals源码
  • linux运维ansible入门

    bilibili视频地址 ansible入门 介绍 无主无从 开箱即用 用完就走 只要能用ssh即可使用ansible 总结 分成两部分 主机 ansible 模块 主机清单 ssh playbook 完成复杂部署 使用yum安装 ansi
  • Vite和webpack区别

    Vite 和 Webpack 都是前端构建工具 Vite 是一个基于 ES modules 的构建工具 而 Webpack 则是一个 Web 应用程序的静态模块打包器 以下是 Vite 和 Webpack 之间的一些区别 构建方式 Vite
  • 微信小程序:wx.getUserInfo()获取用户信息报错

    在使用wx getUserInfo 来获取用户相关信息报错失败 为优化用户体验 使用 wx getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持 从2018年4月30日开始 小程序与小游戏的体验版 开发版调用 wx getUs
  • 微服务架构的核心要点和实现原理

    摘要 本文中 我们将进一步理解微服务架构的核心要点和实现原理 为读者的实践提供微服务的设计模式 以期让微服务在读者正在工作的项目中起到积极的作用 微服务架构中职能团队的划分 传统单体架构将系统分成具有不同职责的层次 对应的项目管理也倾向于将
  • 2023备战金三银四,Python自动化软件测试面试宝典合集(六)

    马上就又到了程序员们躁动不安 蠢蠢欲动的季节 这不 金三银四已然到了家门口 元宵节一过后台就有不少人问我 现在外边大厂面试都问啥 想去大厂又怕面试挂 面试应该怎么准备 测试开发前景如何 面试 一个程序员成长之路永恒绕不过的话题 每每到这个时
  • 最小树形图的环收缩

    气死我了 最近学习关于最小树形图的问题 无论是CSDN还是博客园 真就是天下文章一大抄 图都用一模一样的 又复杂又高糊 我只是想搞懂存在环 这个环是怎么收缩的 结果给我看了屎一样图和文字表达 一气之下 写一个短文好还描述一下环是怎么收缩成点
  • AttributeError: ‘NoneType‘ object has no attribute ‘xxx‘v

    分析 在Python中 NoneType是一个类型 如同int float一样 如 gt gt gt a None gt gt gt type a
  • vi如何使用

    个人发现好多企业内部运维工程师 很少有人懂得VI的使用技巧 通常都是一顿按 上下左右键 搞得我好郁闷 我本人整理了一份VI的使用技巧分享下 希望大家正确 高效 去工作 Vi 1 Vi 10 进入Vi 以第10行为行首 2 Vi 空格 最后一
  • 以太坊学习笔记:私有链搭建操作指南

    原文链接 https my oschina net u 2349981 blog 865256 讲解的内容非常详细 熟悉搭建以太坊私有链的相关操作 学习了 摘要 详解以太坊私有链搭建过程以及一些常用的操作 虽然以太坊是一个公有链系统 但是我
  • 学算法,先从二分查找开始吧

    总纲 思路很简单 细节是魔鬼 分为三个常用场景 寻找一个数 寻找左侧边界 寻找右侧边界 最后给出力扣上的题目例子 还可以在GitHub上观看哦 AlgorithmNotes 基础框架 int binarySearch int nums in
  • MySQL系列11——索引效率测试

    MySQL索引效率测试 一 以mysql添加索引和不添加索引为例 测试数据的插入速度和查询速度 1 首先创建数据表和数据库 在cmd命令行中执行 create database TestDataSpeed charset utf8 use
  • onnxruntime安装与使用(附实践中发现的一些问题)

    关于onnxruntime的一些基本参考链接 onnxruntime官方文档 将pytorch模型转换为onnx模型并用onnxruntime进行推理 Pytorch官方文档 一 onnxruntime安装 1 使用CPU 如果只用CPU进
  • ice服务器回归系统,便携式的ICE中继服务器及其方法

    主权项 1 一种便携式的ICE中继服务器 该ICE中继服务器是分别与一网络终 端装置及一NAT路由器相连接 其特征在于 至少包括 一储存单元 用以储存依据ICE协议标准所提供的多个候选接入点 一第一输出入端口 与该网络终端装置相连接 用以接
  • Mysql中key 、primary key 、unique key 与index区别

    索引被用来快速找出在一个列上用一特定值的行 没有索引 MySQL不得不首先以第一条记录开始并然后读完整个表直到它找出相关的行 表越大 花费时间越多 如果表对于查询的列有一个索引 MySQL能快速到达一个位置去搜寻到数据文件的中间 没有必要考
  • 蚂蚁开放联盟链合约开发入门

    蚂蚁链简介 蚂蚁链包含多个产品 合约体验链 开放联盟链 联盟链 合约体验链 一条本地开发体验链 供您免费体验本地开发的全流程 网址 联盟链 可以创建或加入联盟 门槛较高 网址 开放联盟链 面向企业和开发者提供的 无需搭链 快速上链 接近公链
  • 菜鸟学Java public static void main(String[] args) 是什么意思?

    目录 1 经典程序解析 2 包里面的多个类 2 1 全限定名调用程序 2 2 包名的层数 2 3 类中main位置的选择 2 4 不同包中类的调用 3 void位置返回值 4 同一个包内的类调用 5 public位置选择 6 String
  • ES6:Promise详解

    ES6 Promise详解 1 概念 2 Promise有3种状态 3 Promise和async和await的区别 4 Promise API 5 Promise是用来解决两个问题的 6 Promise的三个缺点 7 Promise的两个