简单聊聊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 ...
随机推荐
- Android4.4 Telephony流程分析——彩信(MMS)发送过程
本文代码以MTK平台Android 4.4为分析对象,与Google原生AOSP有些许差异,请读者知悉. 彩信收发依靠WAP网络,在Android4.4中的实现基于Http协议的应用.下图为几个彩信传 ...
- linux下查看网卡信息的命令
rhel 内核版本号信息: [root@hvrhub ~]# uname -a Linux hvrhub 2.6.18-308.el5 #1 SMP Fri Jan 27 17:17:51 EST 2 ...
- 手写 redux 和 react-redux
1.手写 redux redux.js /** * 手写 redux */ export function createStore(reducer) { // 当前状态 let currentStat ...
- 一览新的 Android Gradle 构建工具:新的 DSL 结构 和 Gradle 2.5
译者地址:[翻]一览新的 Android Gradle 构建工具:新的 DSL 结构 和 Gradle 2.5 原文:First Look at New Android Gradle Build To ...
- C#语法复习2
第五章 方法 1.方法是一块具有名称的代码 包括:方法体.方法头 局部变量必须被赋值才可以执行下面的操作.实例变量有隐式初始化.有时候,类型推断可以用var关键字,类似于C++当中的auto.用于局部 ...
- 走入asp.net mvc不归路:[6]linq常见用法
asp.net mvc结合linq,先不说性能问题,对于增删查改的操作还是相当方便的.以下我们就来介绍一下linq在asp.net mvc的Controller中的常见用法. 1 首先来看看整个数据表 ...
- iOS 内购遇到的坑
一.内购沙盒测试账号在支付成功后,再次购买相同 ID 的物品,会提示如下内容的弹窗.您以购买过此APP内购项目,此项目将免费恢复 原因: 当使用内购购买过商品后没有把这个交易事件关,所以当我们再次去购 ...
- mysql创建 存储过程 并通过java程序调用该存储过程
create table users_ning(id primary key auto_increment,pwd int); insert into users_ning values(id,123 ...
- 白帽子讲web安全读后感
又是厚厚的一本书,为了不弄虚做假,只得变更计划,这一次调整为读前三章,安全世界观,浏览器安全和xss.其它待用到时再专门深入学习. 吴翰清是本书作者,icon是一个刺字,圈内人称道哥.曾供职于阿里,后 ...
- 组合式+迭代式+链式 MapReduce
1.迭代式mapreduce 一些复杂的任务难以用一次mapreduce处理完成,需要多次mapreduce才能完成任务,例如Pagrank,Kmeans算法都需要多次的迭代,关于mapreduce迭 ...