es6 async和await
es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用yield
语句注明.
generator将异步的流程标记的很简洁,但是流程执行却并不方便,所有我们需要借助Generator的自执行下函数。Thunk 函数可以用于generator函数的自流程管理
async和await 作为generator的语法糖,自带自执行器,相对于generator具有更好的语义,yield后面只能时promise,async,await 具有更好的适用性,并不明确规定是promise,async的返回的是promise
1.asycn和await的基本使用
async如果遇到await就会等待,等待其执行结果,才会往下继续执行函数内部语句
- /* 异步执行方法 */
- function timeout(ms) {
- return new Promise((res)=>{
- console.log('settimeout')
- setTimeout(res,ms)
- })
- }
- /* await 只能在async定义的函数内部使用 */
- async function asyncpriint(value,ms) {
- timeout(ms);
- console.log(value);
- }
- asyncpriint('hello world',2000);
- // 先输出settimeout等待2m钟输出hello world
- // 如果去掉await,输出settimeout并且不等待直接输出hello world
async函数返回的是一个promise
- /* async返回时最终会转成一个promise */
- async function donow() {
- return 'czklove'
- }
- async function donow2 () {
- return new Promise(res=>{
- res('czklove')
- })
- }
- async function donow3 () {
- return Promise.resolve('czklove')
- }
- donow().then((val)=>{
- console.log(val)
- })
- // 输出czklove
- donow2().then((val)=>{
- console.log(val)
- })
- // 输出czklove
- /* 2和3是等价的,Promise.resolve 返回一个promise */
- donow3().then((val)=>{
- console.log(val)
- })
- //输出czklove
- // 输出输出czklove
- /* donow和donow2是等价的
- 也就是说返回值是一个值的话,他会自动转化成promise
- */
async返回的promise对象的状态变化
- /* resolve */
- async function promiseresolve(){
- await Promise.resolve('czkloveresolve')
- return 'czklove1'
- }
- /* rejuect */
- async function promisereject(){
- await Promise.reject('czkloverejuct')
- console.log(123)
- return 'czklove2'
- }
- /* 内部都是resolve
- 一直执行下去
- */
- promiseresolve().then(res=>{
- console.log('resolve'+res)
- },rej=>{
- console.log('reject'+rej)
- })
- // resolveczklove1
- /*
- 内部其中一个await是reject,则直接返回,不会再执行下去,并且返回值是rejuect的值
- */
- promisereject().then(res=>{
- console.log('resolve'+res)
- },rej=>{
- console.log('reject'+rej)
- })
- // 不会执行console.log(123)
- // rejectczkloverejuct
await 命令后面是一个promise对象,返回该对象的结果,如果不是promise,值直接放回该值
如果后面是一个带有then 方法的对象,那么会将其等同于promise
await 后面的promise如果执行了rejuect 则整个函数终止,并且返回该对象的结果,返回的promise对象的状态也是rejuect的
如果我们想继续执行下去,则可以将reject的promise 放入try catch 模块中,另外一种是后面跟.catch 方法
- /* 定义一个async 函数 */
- async function awaitfc() {
- try {
- /* 放入try 和 catch 中 reject 不会终止函数执行 */
- await Promise.reject('czklove')
- } catch (e){
- }
- /* .catch 也可以使 reject 不会终止函数执行*/
- await Promise.reject('czklove').catch((e)=>{
- console.log(e)
- })
- return 'jgczklove'
- }
- awaitfc().then(val=>{
- console.log(val)
- })
- //czklove async.js
函数的并发执行或继发执行
- /* 定义一个async 函数 */
- let i = 1;
- function settime(ms) {
- return new Promise((res)=>{
- setTimeout(()=>{
- res ('123'+(i++))
- },ms)
- })
- }
- /* 继发执行 */
- async function funa() {
- let val1 = await settime(2000)
- console.log(val1)
- let val2 = await settime(2000)
- console.log(val2)
- let val3 = await settime(2000)
- console.log(val3)
- console.log('1111')
- }
- /* 并发执行 */
- async function funa2() {
- let val1 = settime(2000);
- let val2 = settime(3000);
- let val3 = settime(2000);
- console.log(await val1)
- console.log(await val2)
- console.log(await val3)
- console.log(2222)
- }
- funa();
- /*
- 继发执行
- 结果是顺序的
- 每隔2秒 输出1231 1232 1233 ,最终输出1111
- */
- funa2();
- /*
- 并发
- val1 val2 val3 输出结果顺序是不定的,但是可以确认,最终才输出2222
- */
使用promise.all 也可以达到并发执行
es6 async和await的更多相关文章
- ES6 async 与 await 实战
下面来说一说通过async和await方式来辅助请求和封装 首先我们定义一个类,定义一个async方法,才可以使用await class JForm extends React.Component { ...
- es6 async与await实战
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...
- ES6 async await
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES6 Generator vs ES6 async/await
ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...
- ES6中async与await的使用方法
promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...
- ES6之async与await
· async - await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性. · async - await 是建立在Promise机 ...
- 不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)
在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www. ...
- Promise,Async,await简介
Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...
- 异步async、await和Future的使用技巧
由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...
随机推荐
- gdal test
https://blog.csdn.net/hb_programmer/article/details/81807699 gdal/ogr是一个光栅和矢量地理空间数据格式的翻译库,由开源地理空间基金会 ...
- Python黑科技:在家远程遥控公司电脑,python+微信一键连接!
有时候需要远程家里的台式机使用,因为我平时都是用 MAC 多,但是远程唤醒只能针对局域网,比较麻烦,于是我想用微信实现远程唤醒机器. 准备工作 本程序主要是实现远程管理 Windows10操作系统的开 ...
- Vue-router 中hash模式和history模式的区别
实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...
- css中如何使用border属性与display属性
border属性介绍 border属性设置元素边框. 边框3个要素如:粗细.线型.颜色. 边框线型属性值说明表如: 属性指 描述 none 定义无边框. hidden 与 "none&quo ...
- socket基本概念
1.socket 是什么? 在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式.通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其 ...
- node.js npm 操作 模块化开发 cnpm镜像安装
模块(包) 传统引入 js 的缺点 整个网页,我们写了一个 js 文件,所有的特效都在里面 耦合度太高,代码之间关联性太强,不便于后期维护 变量容易 全局污染 如果将 复杂的 js 文件,拆成多个功能 ...
- 【flask_sqlalchemy】模糊查询
flask_sqlalchemy的查询方法有filter()和filter_() 这2个方法的主要区别如下: 模块 语法 ><(大于和小于)查询 and_和or_查询 filter_by( ...
- Mac上的应用,例如Xcode需要输入原始下载账号才能更新问题
为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,或者公司接管上任同事使用的Mac时,上面的应用都是用别人的账号购买下载的,而非使用自己账号在AppStore下载的. 这样的安装 ...
- WPF DevExpress Chart控件 界面绑定数据源,不通过C#代码进行绑定
<Grid x:Name="myGrid" Loaded="Grid_Loaded" DataContext="{Binding PartOne ...
- Apache配置文件介绍
一.配置文件存放位置 apache配置文件名为httpd.conf 1.yum安装 yum安装后,apache配置文件httpd.conf存放在目录/etc/httpd/conf下 2.源码编译安装 ...