JS执行Promise
Promise
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。
特点
- 对象的状态不受外界影响 (3种状态)
- Pending状态(进行中)
- Fulfilled状态(已成功)
- Rejected状态(已失败)
- 一旦状态改变就不会再变 (两种状态改变:成功或失败)
- Pending -> Fulfilled
- Pending -> Rejected
用法
创建Promise实例
var promise = new Promise(function(resolve, reject){// ... some codeif (/* 异步操作成功 */) {resolve(value);} else {reject(error);}
})
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由JavaScript引擎提供,不用自己部署。
resolve作用是将Promise对象状态由“未完成”变为“成功”,也就是Pending -> Fulfilled
,在异步操作成功时调用,并将异步操作的结果作为参数传递出去;而reject函数则是将Promise对象状态由“未完成”变为“失败”,也就是Pending -> Rejected
,在异步操作失败时调用,并将异步操作的结果作为参数传递出去。
then
Promise实例生成后,可用then
方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数:
- Promise对象状态改为Resolved时调用 (必选)
- Promise对象状态改为Rejected时调用 (可选)
基本用法示例
function sleep(ms) {return new Promise(function(resolve, reject) {setTimeout(resolve, ms);})
}
sleep(500).then( ()=> console.log("finished"));
这段代码定义了一个函数sleep,调用后,等待了指定参数(500)毫秒后执行then中的函数。值得注意的是,Promise新建后就会立即执行。
执行顺序
接下来我们探究一下它的执行顺序,看以下代码:
let promise = new Promise(function(resolve, reject){console.log("AAA");resolve()
});
promise.then(() => console.log("BBB"));
console.log("CCC")// AAA
// CCC
// BBB
执行后,我们发现输出顺序总是 AAA -> CCC -> BBB
。表明,在Promise新建后会立即执行,所以首先输出 AAA
。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以BBB 最后输出
。
与定时器混用
首先看一个实例:
let promise = new Promise(function(resolve, reject){console.log("1");resolve();
});
setTimeout(()=>console.log("2"), 0);
promise.then(() => console.log("3"));
console.log("4");// 1
// 4
// 3
// 2
可以看到,结果输出顺序总是:1 -> 4 -> 3 -> 2
。1与4的顺序不必再说,而2与3先输出Promise的then,而后输出定时器任务。原因则是Promise属于JavaScript引擎内部任务,而setTimeout则是浏览器API,而引擎内部任务优先级高于浏览器API任务,所以有此结果。
拓展 async/await
async
顾名思义,异步。async函数对 Generator 函数的改进,async 函数必定返回 Promise,我们把所有返回 Promise 的函数都可以认为是异步函数。特点体现在以下四点:
- 内置执行器
- 更好的语义
- 更广的适用性
- 返回值是 Promise
await
顾名思义,等待。正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。另一种情况是,await命令后面是一个thenable对象(即定义then方法的对象),那么await会将其等同于 Promise 对象。
混合使用
先看示例:
function sleep(ms) {return new Promise(function(resolve, reject) {setTimeout(resolve,ms);})
}
async function handle(){console.log("AAA")await sleep(5000)console.log("BBB")
}handle();// AAA
// BBB (5000ms后)
我们定义函数sleep,返回一个Promise。然后在handle函数前加上async关键词,这样就定义了一个async函数。在该函数中,利用await来等待一个Promise。
Promise优缺点
优点 | 缺点 |
---|---|
解决回调 | 无法监测进行状态 |
链式调用 | 新建立即执行且无法取消 |
减少嵌套 | 内部错误无法抛出 |
作者:流眸Tel
链接:https://www.jianshu.com/p/b16e7c9e1f9f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
JS执行Promise相关推荐
- JS 通过 Promise 实现延时执行,支持链式调用
JS 通过 Promise 实现延时执行,支持链式调用 延时执行 sleep 版本一 同步执行 异步方式 sleep 版本二 支持链式调用 版本一 版本二 参考资料 延时执行 定义sleep函数 sl ...
- JS中Promise函数then的奥秘探究
JS中Promise函数then的奥秘探究 Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个 ...
- 由浅入深解释JS执行机制 EventLoop
一.微任务与宏任务 JS中的任务可分为以下两类 ·macro-task(宏任务):包括整体代码script,setTimeout,setInterval ·micro-task(微任务):Promis ...
- 浏览器交响曲 (一)浏览器中的js执行机制
浏览器的工作原理 浏览器中的js执行机制 单线程的含义 同步.异步 完了吗?事情并非如此 所以执行的机制是怎样的?(宏任务.微任务) 个人理解: 希望过路大佬不吝赐教 浏览器中的js执行机制 今天在网 ...
- JS基础 Promise
阅读目录 Promise 问题探讨 定时嵌套 图片加载 加载文件 异步请求 肯德基 异步状态 状态说明 promise 没有使用 resolve 或 reject 更改状态时,状态为 pending ...
- JS执行机制、同步和异步、宏观任务和微观任务
1. JS 是单线程 JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. 这是因为 Javascript 这门脚本语言诞生的使命所致--JavaScript 是为处理页 ...
- 【前端】等待异步任务js执行完毕再执行
[前端]等待异步任务js执行完毕再执行 //页面加载完毕后执行 $(function(){console.info('---- 我是js代码 Start ----');//异步方法集合let prom ...
- JS 的 Promise详解
@[TOC](JS 的 Promise详解)欧诺个鱼 1.概念 ES 6 开始支持 Promise. Promise 对象用于一个异步操作的最终完成(包括成功和失败)及结果值的表示.简而言之,就是处理 ...
- JavaScript系列之JS执行机制
文章の目录 1.JS是单线程 2.一个问题 3.同步和异步 3.1.同步 3.2.异步 3.3.同步和异步的本质区别 3.4.同步任务 3.5.异步任务 4.JS执行机制 5.示例 6.事件循环 7. ...
最新文章
- 软件项目管理重点总结
- 9.如何使用QT绘制导航箭头的图标
- c语言回调函数_C语言学习第26篇---函数与指针分析 回调函数
- rhel 4/oracle linux 4/centos linux 4 配置本地yum资源库
- PPP认证方式pap chap chap2
- IntelliTrace 调试、定位异常
- LeetCode 2064. 分配给商店的最多商品的最小值(二分查找)
- 总有一些人在祖国需要的时候挺身而出
- thinkphp创建对象及数据操作
- iOS开发之 WebView
- matlab能替代几何画板吗,比几何画板更强大的工具软件GeoGebra,数学老师值得拥有...
- moodle基本配置
- 川崎机器人示教盒维修_阳江市川崎机器人示教器维修中心
- python爬取豆瓣电影排行榜前250名
- 一位知名 Python 技术博主因病离世
- 夜读 | 读书和不读书的人生,差别有多大
- PaddlePaddle飞浆搭建和机器学习文字识别
- 汇编基础--cmp汇编指令
- 画火柴人动画的手机软件_火柴人动画制作软件(Pivot Stickfigure Animator)2.25 中文版附教程...
- selvert 小解
热门文章
- linux history 看更多历史记录_每周开源点评:定义云原生、拓展生态系统,以及更多的行业趋势 | Linux 中国...
- 快速排序思路(Hoare版),代码实现
- java format 补足空格_11 个简单的 Java 性能调优技巧
- 1.13单用户模式 1.14 救援模式 1.15 克隆虚拟机 1.16 Linux机器相互登录
- 江湖不再平静---51CTO学院停服公告
- spy-debugger 前端调试工具
- 结对开发——电梯调度问题需求分析
- JS 判断一个字符串是否包含在一个数组中
- 简单的libevent例子
- 如何管理好IDC机房?(一)