async-await
时间:2019-06-12
本文章向大家介绍async-await,主要包括async-await使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
async,await和promise并不冲突,可以是promise的扩展
1、then只是将callback拆分了(以前callbak的也是函数,只不过后面可以拆分了,组件化了)
function waitHandle(){ var dtd = $.Deferred(); // 创建一个deferred对象 var wait = function(dtd){ // 要求传入一个 deferred对象 var task = function(){ console.log('执行完成'); dtd.resolve(); // 表示异步任务已经完成 // dtd.reject(); // 表示异步任务失败或出错 } setTimeout(task, 2000); return dtd.promise(); // 这里返回promise,而不是直接反悔deferred } // 注意,这里一定要有返回值 return wait(dtd); } var w = waitHandle(); w.then(function(){ console.log('ok1') },function(){ console.log('error1') }).then(function(){ console.log('ok2') },function(){ console.log('error2'); })
2、aysnc/await是最直接的同步写法(执行的顺序跟写法一样)
import 'babel-polyfill'; function loadImg(src) { const promise = new Promise(function (resolve, reject) { var img = document.createElement('img'); img.onload = function(){ resolve(img); } img.onerror = function(){ reject(); } img.src = src; }) return promise; } const load = async function(){ const result1 = await loadImg('xxx.png'); console.log(result1); const result2 = await loadImg('yyy.png'); console.log(result2); } load();
用法
1、使用await,函数必须用async标识
2、await后面跟的是一个Promise实例
3、需要babel-polyfill(兼容的意思)
npm i --save-dev babel-polyfill
总结
1、使用了Promise,并没有和Promise冲突
2、完全是同步的写法,再也没有回调函数
3、但是:改变不了js单线程、异步的本质
原文地址:https://www.cnblogs.com/wzndkj/p/11007391.html
- 手机APP安装包缩减方案
- react-native添加redux支持
- Java并发学习之ReentrantLock的工作原理及使用姿势
- Linux基础(day63)
- IOS WebView控件详解
- Java并发学习之synchronized使用小结
- 18.3/18.4/18.5 用keepalived配置高可用集群
- JDK容器学习之Queue:DelayQueue
- React-Native组件之 Navigator和NavigatorIOS
- JDK容器学习之Queue:ConcurrentLinkedQueue
- JDK容器学习之Queue: PriorityQueue
- React Native导航器之react-navigation使用
- Nginx 路由转发配置笔记
- React Native控件之ListView
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Centreon+Nagios实战第七篇——安装NRPE
- Python自学成才之路 详解类的三个重要方法__new__,__init__,__call__
- Centreon+Nagios实战第五篇——监控端安装Centreon
- Centreon+Nagios实战第四篇——监控端安装NDOUtils
- python自学成才之路 类属性和实例属性,__slots__方法
- 算法初步 基本概念 最大子数组和
- Oracle数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名详解
- Maven实战之旅第六篇——maven常用指令
- maven实战之旅第四篇——利用maven archetype手动建立一个maven项目
- 一起刷 leetcode 之旋转矩阵
- exe调用DLL的方式
- 聊聊claudb的DatabaseCleaner
- Stata | 排名转为得分
- kafka使用avro序列化和反序列化
- avro使用schema生成java文件