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的更多相关文章

  1. ES6 async 与 await 实战

    下面来说一说通过async和await方式来辅助请求和封装 首先我们定义一个类,定义一个async方法,才可以使用await class JForm extends React.Component { ...

  2. es6 async与await实战

    在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...

  3. ES6 async await

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ES6 Generator vs ES6 async/await

    ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...

  5. ES6中async与await的使用方法

    promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...

  6. ES6之async与await

    · async - await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性. · async - await 是建立在Promise机 ...

  7. 不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)

    在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www. ...

  8. Promise,Async,await简介

    Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...

  9. 异步async、await和Future的使用技巧

    由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...

随机推荐

  1. 【bzoj3223】Tyvj 1729 文艺平衡树

    题目描述: 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 输入 ...

  2. 论文阅读:Flow-level State Transition as a New Switch Primitive for SDN

    Name of article:Flow-level State Transition as a New Switch Primitive for SDN Origin of the article: ...

  3. 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效。不允许有扩展属性,或对象不存在。

    不知道网上为啥有那么多复制粘贴的文章,写点原创不好吗?堂而皇之的贴别人的文章有意思吗? 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,对象无效.不允许有扩 ...

  4. pymysql(一)检索、增加、更新、删除数据

    (一)  SELECT 检索数据 代码如下: import pymysql '''pymysql使用指南host = '127.0.0.1'回送地址,指本地机port = 3306MySQL的默认端口 ...

  5. git本地分支推送到远程分支

    1.创建的创建和初始化 创建git仓库可以在远端创建一个仓库, 然后check到本地,在本地的文件里创建工程文件,然后提交 也可以将本地现有的工程和远端的空仓库关联 本地创建了一个工程 iOSDemo ...

  6. npm link的作用

    语法: 1. 在一个包目录下npm link (把当前的包目录软连接到global folder里面,把二进制文件也软连接到global的bin里面  这个prefix可以用npm config ls ...

  7. c++ 事件回调 java

    #pragma once #ifdef __cplusplus extern "C" { #endif typedef void(*sig_t)(int); int FirstEl ...

  8. ES6标准入门 第五章:正则的扩展

    1.RegExp 构造函数 ES5的缺陷: ES5中构造函数的参数有两种情况: (1)参数是字符串,这时第二个参数表示正则表达式的的修饰符(flag). var reg = new RegExp( & ...

  9. 【MM系列】SAP OX09中的地址如何取

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP OX09中的地址如何取   ...

  10. MySQL学习-预备知识

    开始今日份整理 1. 数据库介绍 1.1 数据库定义 数据库是一个由一批分明别类的数据构成的有序集合,这个集合通常被保存为一个或多彼此相关的文件,我们可以理解为,数据库就是一种特殊的文件,其中存储着我 ...