简单聊聊ES6-Promise和Async
前言
本篇博文出至于我的
github
仓库:web-study,如果你觉得对你有帮助欢迎star,你们的点赞是我持续更新的动力,谢谢!
异步编程在前端开发中尤为常见,从最早的XHR
,到后来的各种封装ajax
,再到DOM
事件触发的回调,无不涉及异步编程。今天咱们来聊聊ES6
中新提出的异步解决方案:Promise
和async/await
。
- Promise的原理和基本用法
- Promise的原理
Promise 是一种对异步操作的封装,可以通过独立的接口添加在异步操作执行成功、失败时执行的方法。主流的规范是 Promises/A+。
Promise中有几个状态:
* pending: 初始状态, 非 fulfilled 或 rejected;
* fulfilled: 成功的操作,为表述方便,fulfilled 使用 resolved 代替;
* rejected: 失败的操作。
pending可以转化为fulfilled或rejected并且只能转化一次,也就是说如果pending转化到fulfilled状态,那么就不能再转化到rejected。并且fulfilled和rejected状态只能由pending转化而来,两者之间不能互相转换。
- Promise的基本用法
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。
resolve
的用法var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
resolve('随便什么数据');
}, 2000);
})
p.then(res => {
console.log(res) // '随便什么数据'
})
Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。
在上面的代码中,我们执行了一个异步操作,也就是setTimeout
,2秒后,并且调用resolve方法,表示异步操作执行成功。
reject
的用法
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
reject('随便什么数据');
}, 2000);
})
p.catch(err => {
console.log(err) // '随便什么数据'
})
```
上面我们在异步操作中调用了`reject`方法,也就是说把Promise的状态由`pending`转换到了`fulfilled`状态,最后可以通过Promise实例对象的`catch()`方法获取异步数据。
* Async/Await简介与用法
异步操作是 JavaScript 编程的麻烦事,很多人认为async函数是异步操作的终极解决方案。
1. Async/Await简介
* async/await是写异步代码的新方式,优于回调函数和Promise。
* async/await是基于Promise实现的,它不能用于普通的回调函数。
* async/await与Promise一样,是非阻塞的。
* async/await使得异步代码看起来像同步代码,再也没有回调函数。但是改变不了JS单线程、异步的本质。
2. Async/Await的用法
* 使用await,函数必须用async标识
* await后面跟的是一个Promise实例或者是其他的任意js表达式(意义不大)
```javascript
var fun = async () => {
let result = await Promise.resolve(123)
console.log(result)
}
fun() // 123
await
等待的虽然是promise对象,但是不用调用.then()方法就能直接得到返回值。
- Async/Await的应用
Promise
虽然一方面解决了callback
的回调地狱,但是相对的把回调“纵向发展”了,形成了一个回调链。example:
function sleep(wait) {
return new Promise((res,rej) => {
setTimeout(() => {
res(wait)
},wait)
})
}
/*
let p1 = sleep(100)
let p2 = sleep(200)
let p =*/
sleep(100).then(result => {
return sleep(result + 100)
}).then(result02 => {
return sleep(result02 + 100)
}).then(result03 => {
console.log(result03)
})
控制台输出:
300
后面的结果都是依赖前面的结果。
改成async/await写法就是:
async function demo() {
let result01 = await sleep(100)
//上一个await执行之后才会执行下一句
let result02 = await sleep(result01 + 100)
let result03 = await sleep(result02 + 100)
// console.log(result03);
return result03
}
demo().then(result => {
console.log(result)
})
因为async返回的也是promise对象,所以用then接受就行了。
结果:
300
需要注意的就是 await
是强制把异步变成了同步,这一句代码执行完,才会执行下一句。
简单聊聊ES6-Promise和Async的更多相关文章
- Promise、async、await在Egret的简单应用
Egret Engnie 5.1.10 Egret Wing 4.1.5 一.Promise.async.await相关知识 Promise介绍 阮一峰 async函数 阮一峰 具体和详细的说明用法可 ...
- Promise,Async,await简介
Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...
- Promise, Generator, async/await的渐进理解
作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
- ES6 Promise(2)
Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔的出现.不仅代码写起来费劲不美观,而且问题复杂的时候,阅读代码的人也难以理解. db.save( ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
- 异步Promise及Async/Await可能最完整入门攻略
此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...
随机推荐
- 通过BSSID和无线流量传输后门Payload
本文将探讨无线接入点(AP)和BSSID(MAC地址AP).我们不借助文件系统加密和文件系统中(仅内存中)的硬编码Payload即可获得后门Payload,通过该方法可绕过所有的杀软,可以不使用Pay ...
- AnimalWindow使用,实现界面动态消失
http://m.blog.csdn.net/blog/shufac/24932279 http://blog.sina.com.cn/s/blog_455245fc01000a42.html Ani ...
- 二:redis 的hash类型相关操作
=====================二种:hash类型================== 介绍:redis -> hash是一个string类型的field和value的映射表 hash ...
- 随着ScrollView的滑动,渐渐的运行动画View
今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自己定义ScrollView 复写onScrollChange方法,来计算滑动的位置. 2.自己定义接口,通过接口来在ScrollVie ...
- Linux在本地使用yum安装软件(转)
经常遇到有的linux服务器由于特殊原因,不能连接外网,但是经常需要安装一些软件,尤其是在编译一些包的时候经常由于没有安装一些依存包而报的各种各样的错误,当你找到依存的rpm包去安装的时候,又提示你有 ...
- 性能问题案例02——sybase连接堵塞问题
现象:近期现场反馈一个问题.系统在审批的时候,常常卡死.整个系统全然用不了,浏览器訪问处于loading的状态. 排查: 1.一般系统挂了首先想到内存问题,可是现象是loading,也就是说没有挂,线 ...
- 【项目发起】千元组装一台大型3D打印机全教程(一)前言
前言 最近又碰到了大尺寸模型打样的需求,我这台17cm直径的kossel mini就捉襟见肘了.怎么办呢,这个时候kossel的好就体现出来了,随意扩展,那么就自己做个kossel-max吧.为了向前 ...
- atitit.eclipse有多少api  扩展点,以及扩展点的设计
atitit.eclipse有多少api 扩展点,以及扩展点的设计 不赞成使用的.作废的以及内部的扩展点 [扩展]页显示了几个你不应该在你的插件中使用的扩展点.在附表C.1的[描写叙述]栏中.我们使 ...
- 【bzoj3210】花神的浇花集会
将(x,y)转化成(x+y,x-y)可以将切比雪夫距离转化成曼哈顿距离(自己推一推) A.B的切比雪夫距离就是A‘.B‘曼哈顿距离的一半. 那么可以将x.y分离处理,排序中位数即可. 注意如果最后选的 ...
- dotnet core 入门
之前一至用的dotnet 做开发,项目没有用过.netcore,现在看微软对dotnetcore的重视度越来越高,所以dotnetcore也是每一个.dotnet开发人员的一项必备技能.一个偶然的机会 ...