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就会等待,等待其执行结果,才会往下继续执行函数内部语句

  1. /* 异步执行方法 */
  2. function timeout(ms) {
  3. return new Promise((res)=>{
  4. console.log('settimeout')
  5. setTimeout(res,ms)
  6. })
  7. }
  8. /* await 只能在async定义的函数内部使用 */
  9. async function asyncpriint(value,ms) {
  10. timeout(ms);
  11. console.log(value);
  12. }
  13. asyncpriint('hello world',2000);
  14. // 先输出settimeout等待2m钟输出hello world
  15. // 如果去掉await,输出settimeout并且不等待直接输出hello world

  async函数返回的是一个promise

  1. /* async返回时最终会转成一个promise */
  2. async function donow() {
  3. return 'czklove'
  4. }
  5. async function donow2 () {
  6. return new Promise(res=>{
  7. res('czklove')
  8. })
  9. }
  10. async function donow3 () {
  11. return Promise.resolve('czklove')
  12. }
  13. donow().then((val)=>{
  14. console.log(val)
  15. })
  16. // 输出czklove
  17. donow2().then((val)=>{
  18. console.log(val)
  19. })
  20. // 输出czklove
  21. /* 2和3是等价的,Promise.resolve 返回一个promise */
  22. donow3().then((val)=>{
  23. console.log(val)
  24. })
  25. //输出czklove
  26. // 输出输出czklove
  27. /* donow和donow2是等价的
  28. 也就是说返回值是一个值的话,他会自动转化成promise
  29. */

  async返回的promise对象的状态变化

  1. /* resolve */
  2. async function promiseresolve(){
  3. await Promise.resolve('czkloveresolve')
  4. return 'czklove1'
  5. }
  6. /* rejuect */
  7. async function promisereject(){
  8. await Promise.reject('czkloverejuct')
  9. console.log(123)
  10. return 'czklove2'
  11. }
  12. /* 内部都是resolve
  13. 一直执行下去
  14. */
  15. promiseresolve().then(res=>{
  16. console.log('resolve'+res)
  17. },rej=>{
  18. console.log('reject'+rej)
  19. })
  20. // resolveczklove1
  21.  
  22. /*
  23. 内部其中一个await是reject,则直接返回,不会再执行下去,并且返回值是rejuect的值
  24. */
  25. promisereject().then(res=>{
  26. console.log('resolve'+res)
  27. },rej=>{
  28. console.log('reject'+rej)
  29. })
  30. // 不会执行console.log(123)
  31. // rejectczkloverejuct

  await  命令后面是一个promise对象,返回该对象的结果,如果不是promise,值直接放回该值

    如果后面是一个带有then 方法的对象,那么会将其等同于promise

    await 后面的promise如果执行了rejuect 则整个函数终止,并且返回该对象的结果,返回的promise对象的状态也是rejuect的

    如果我们想继续执行下去,则可以将reject的promise 放入try catch 模块中,另外一种是后面跟.catch 方法

  1. /* 定义一个async 函数 */
  2. async function awaitfc() {
  3. try {
  4. /* 放入try 和 catch 中 reject 不会终止函数执行 */
  5. await Promise.reject('czklove')
  6. } catch (e){
  7.  
  8. }
  9. /* .catch 也可以使 reject 不会终止函数执行*/
  10. await Promise.reject('czklove').catch((e)=>{
  11. console.log(e)
  12. })
  13. return 'jgczklove'
  14. }
  15. awaitfc().then(val=>{
  16. console.log(val)
  17. })
  18. //czklove async.js

  函数的并发执行或继发执行

  1. /* 定义一个async 函数 */
  2. let i = 1;
  3. function settime(ms) {
  4. return new Promise((res)=>{
  5. setTimeout(()=>{
  6. res ('123'+(i++))
  7. },ms)
  8. })
  9. }
  10. /* 继发执行 */
  11. async function funa() {
  12. let val1 = await settime(2000)
  13. console.log(val1)
  14. let val2 = await settime(2000)
  15. console.log(val2)
  16. let val3 = await settime(2000)
  17. console.log(val3)
  18. console.log('1111')
  19. }
  20. /* 并发执行 */
  21. async function funa2() {
  22. let val1 = settime(2000);
  23. let val2 = settime(3000);
  24. let val3 = settime(2000);
  25. console.log(await val1)
  26. console.log(await val2)
  27. console.log(await val3)
  28. console.log(2222)
  29. }
  30. funa();
  31. /*
  32. 继发执行
  33. 结果是顺序的
  34. 每隔2秒 输出1231 1232 1233 ,最终输出1111
  35. */
  36. funa2();
  37. /*
  38. 并发
  39. val1 val2 val3 输出结果顺序是不定的,但是可以确认,最终才输出2222
  40. */

  使用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. gdal test

    https://blog.csdn.net/hb_programmer/article/details/81807699 gdal/ogr是一个光栅和矢量地理空间数据格式的翻译库,由开源地理空间基金会 ...

  2. Python黑科技:在家远程遥控公司电脑,python+微信一键连接!

    有时候需要远程家里的台式机使用,因为我平时都是用 MAC 多,但是远程唤醒只能针对局域网,比较麻烦,于是我想用微信实现远程唤醒机器. 准备工作 本程序主要是实现远程管理 Windows10操作系统的开 ...

  3. Vue-router 中hash模式和history模式的区别

    实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...

  4. css中如何使用border属性与display属性

    border属性介绍 border属性设置元素边框. 边框3个要素如:粗细.线型.颜色. 边框线型属性值说明表如: 属性指 描述 none 定义无边框. hidden 与 "none&quo ...

  5. socket基本概念

    1.socket 是什么? 在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式.通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其 ...

  6. node.js npm 操作 模块化开发 cnpm镜像安装

    模块(包) 传统引入 js 的缺点 整个网页,我们写了一个 js 文件,所有的特效都在里面 耦合度太高,代码之间关联性太强,不便于后期维护 变量容易 全局污染 如果将 复杂的 js 文件,拆成多个功能 ...

  7. 【flask_sqlalchemy】模糊查询

    flask_sqlalchemy的查询方法有filter()和filter_() 这2个方法的主要区别如下: 模块 语法 ><(大于和小于)查询 and_和or_查询 filter_by( ...

  8. Mac上的应用,例如Xcode需要输入原始下载账号才能更新问题

    为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,或者公司接管上任同事使用的Mac时,上面的应用都是用别人的账号购买下载的,而非使用自己账号在AppStore下载的. 这样的安装 ...

  9. WPF DevExpress Chart控件 界面绑定数据源,不通过C#代码进行绑定

    <Grid x:Name="myGrid" Loaded="Grid_Loaded" DataContext="{Binding PartOne ...

  10. Apache配置文件介绍

    一.配置文件存放位置 apache配置文件名为httpd.conf 1.yum安装 yum安装后,apache配置文件httpd.conf存放在目录/etc/httpd/conf下 2.源码编译安装 ...