JavaScript中Promise 使用、原理以及实现过程
1.什么是 Promise
promise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案。
2.Promise 原理简析
(1)promise 本身相当于一个状态机,拥有三种状态
- pending
- fulfilled
- rejected
一个 promise 对象初始化时的状态是 pending,调用了 resolve 后会将 promise 的状态扭转为 fulfilled,调用 reject 后会将 promise 的状态扭转为 rejected,这两种扭转一旦发生便不能再扭转该 promise 到其他状态。
(2)promise 对象原型上有一个 then 方法,then 方法会返回一个新的 promise 对象,并且将回调函数 return 的结果作为该 promise resolve 的结果,then 方法会在一个 promise 状态被扭转为 fulfilled 或 rejected 时被调用。then 方法的参数为两个函数,分别为 promise 对象的状态被扭转为 fulfilled 和 rejected 对应的回调函数
3.Promise 如何使用
构造一个 promise 对象,并将要执行的异步函数传入到 promise 的参数中执行,并且在异步执行结束后调用 resolve( ) 函数,就可以在 promise 的 then 方法中获取到异步函数的执行结果
new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 1000)
}).then(
res => {},
err => {}
)
同时在 Promise 还为我们实现了很多方便使用的方法:
- Promise.resolve
Promise.resolve 返回一个 fulfilled 状态的 promise
const a = Promise.resolve(1)
a.then(
res => {
// res = 1
},
err => {}
)
- Promise.all
Promise.all 接收一个 promise 对象数组作为参数,只有全部的 promise 都已经变为 fulfilled 状态后才会继续后面的处理。Promise.all 本身返回的也是一个 promise
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1')
}, 100)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2')
}, 100)
})
const promises = [promise1, promise2]
Promise.all(promises).then(
res => {
// promises 全部变为 fulfilled 状态的处理
},
err => {
// promises 中有一个变为 rejected 状态的处理
}
)
- Promise.race
Promise.race 和 Promise.all 类似,只不过这个函数会在 promises 中第一个 promise 的状态扭转后就开始后面的处理(fulfilled、rejected 均可)
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise1')
}, 100)
})
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise2')
}, 1000)
})
const promises = [promise1, promise2]
Promise.race(promises).then(
res => {
// 此时只有 promise1 resolve 了,promise2 仍处于 pending 状态
},
err => {}
)
配合 async await 使用
现在的开发场景中我们大多会用 async await 语法糖来等待一个 promise 的执行结果,使代码的可读性更高。async 本身是一个语法糖,将函数的返回值包在一个 promise 中返回。
// async 函数会返回一个 promise
const p = async function f() {
return 'hello world'
}
p.then(res => console.log(res)) // hello world
开发技巧
在前端开发上 promise 大多被用来请求接口,Axios 库也是开发中使用最频繁的库,但是频繁的 try catch 扑捉错误会让代码嵌套很严重。考虑如下代码的优化方式
const getUserInfo = async function() {
return new Promise((resolve, reject) => {
// resolve() || reject()
})
}
// 为了处理可能的抛错,不得不将 try catch 套在代码外边,一旦嵌套变多,代码可读性就会急剧下降
try {
const user = await getUserInfo()
} catch (e) {}
好的处理方法是在异步函数中就将错误 catch,然后正常返回,如下所示
JavaScript中Promise 使用、原理以及实现过程的更多相关文章
- 全面理解Javascript中Promise
全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...
- JavaScript中new实现原理
JavaScript中new实现原理 1.创建一个空对象 obj 2.将该对象 obj 的原型链 __proto__ 指向构造函数的原型 prototype, 并且在原型链 __proto__ 上设置 ...
- Mysql中主从复制的原理、配置过程以及实际案例
Mysql中主从复制的原理.配置过程以及实际案例1.什么是主从复制?原理:主从分离,什么意思呢?我们不妨画个图看看.如图1所示: 2.准备工作:预备两台服务器,我这里使用虚拟机安装了两个Centos6 ...
- JavaScript中的计时器原理
理解John Resig 在 How JavaScript Timers Work. 原理分析 timer(setInterval,setTimeout)有一个很重要的概念,时间延迟的长短是不稳定的. ...
- JavaScript 中 this 的原理
一.问题 学习 JavaScript 其中一个标志就是理解下面两种写法,会输出有不一样的结果. var obj = { foo: function () {} }; var foo = obj.foo ...
- javaScript中的闭包原理 (译)
这篇文章通过javaScript代码解释了闭包的原理,来让编程人员理解闭包.它不是写给大牛或使用功能性语言进行编程的程序员的.一旦意会了其核心概念,闭包理解起来并不难.然而,你不可能通过阅读任何有关闭 ...
- 剖析Javascript中forEach()底层原理,如何重写forEach()
我们平时用的forEach()一般是这样用的 var myArr = [1,5,8] myArr.forEach((v,i)=>{ console.log(v,i) })//运行后是这样的1 0 ...
- javascript 中 Promise的使用
有点经验的js前端都知道 ajax异步函数里面的结果不会立即返回,如果你想在一个异步函数得到某个结果后去执行一个语句怎么做? if ( 异步函数 ) { 语句 } 可能很多人都踩过这样坑,这个时候 ...
- 浅谈Javascript中Promise对象的实现
https://segmentfault.com/a/1190000000684654 What? Promise是CommonJS的规范之一,拥有resolve.reject.done.fail.t ...
随机推荐
- JAVAEE 和项目开发(第五课:服务器软件的介绍)
Web服务器根据对javaEE支持的能力分为两大类 1,JavaEE服务器(应用服务器) 1) IBM公司 WebSphere 2) BEA公司 WebLogic 3) JBoss 公司 JBoss ...
- java集合对象区别二
集合包是Java中最常用的包,它最常用的有Collection和Map两个接口的实现类,Collection用于存放多个单对象,Map用于存放Key-Value形式的键值对. Collection中常 ...
- iOS 保存图片(视频)到相册
1.C语言函数方式实现 注意:UIImageWriteToSavedPhotosAlbum方法必须实现代理方法,否则会崩溃. //参数1:图片对象 //参数2:成功方法绑定的target //参数3: ...
- 实验吧Web-中-登陆一下好吗??
题目上说:不要怀疑,我已经过滤了一切,还再逼你注入,哈哈哈哈哈! 可以试试,只要是输入的关键字都被过滤了,双写也被过滤掉了. 用万能密码发现,or被过滤掉了. 这里用到的是admin为:'=',密码为 ...
- 7.CSRF攻击和文件上传漏洞攻击
一.CSRF攻击及防范措施 1.概念 请求来源于其他网站,请求并不是用户的意愿,而是伪造的请求,诱导用户发起的请求 2.场景 攻击者盗用了你的身份,以你的名义发送恶意请求.CSRF能够做的事情包括:以 ...
- 基于图灵api的Python机器人
一.注册图灵机器人 先注册并登录图灵机器人官网: 点击创建机器人 复制机器人的key 二.搭建Python机器人 Python版本:3.6 注意替换第三行代码的apikey import reques ...
- AJAX(阿贾克斯)的简单应用
1.ajax 对象的属性说明(常用的) (1)open(method,url,boolean);创建请求,method :填请求类型(get post),url :请求的地址, boolean:tru ...
- P3241 [HNOI2015]开店
题解:动态点分治 建立点分树 每个点维护点分树子树内节点到这个节点和父亲节点距离的前缀和 二分查找锁定合法区间 对每个祖先分治中心查询路径和然后减去不合法子树内的路径和 注意:求大量LCA时用树剖 不 ...
- 【每日Scrum】第六天冲刺
一.计划会议内容 数据库仍然有问题,决定先绕过数据库,进行软件内容设计与界面ui美化. 二.任务看板 三.scrum讨论照片 四.产品的状态 无 五.任务燃尽图
- bootstrap 基础表单
表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. ☑ LESS版本:对应源文 ...