03-es6语法 Promise 和 es8语法 async await 的了解和基本使用
- //Promise
- // 1.说明 : Promise 是 es6 中提出的新语法
- // 2.作用 : 用 '用户编写同步代码' 的方式 '处理异步' 的一种解决方案
- // 3.以前 : 处理异步 , 都是通过回调处理的 ,
- // ==> 比如 :
- setTimeout(() => {}, 0);
- $.ajax({
- url: '',
- type: '',
- data: {},
- dataType: json,
- success: res => {
- $.ajax({
- url: '',
- type: '',
- data: {},
- dataType: json,
- success: res => {
- $.ajax({
- url: '',
- type: '',
- data: {},
- dataType: json,
- success: res => {}
- });
- }
- });
- }
- });
- // 现在 : 可以使用 Promise 解决回调地狱的问题
- // ==> 比如 :
- promise.then().then().then() ...
- // 4.Promise 的基本使用
- // ① Promise 是一个构造函数
- // ② () 中是一个回调函数 => 里面有两个参数 :
- // 参数 1: resolve: 一个回调 => 成功操作会调用
- // 参数 2: resolve: 一个回调 => 成功操作会调用
- // ③ promise 里面一般会放一个异步操作 :
- // 比如 :
- const p = new Promise((resolve, reject) => {
- setTimeout(() => {
- // 成功操作时执行 : resolve()
- // 失败操作时执行 : reject()
- }, 0);
- });
- // 5.示列 (用 promise 封装一个异步读取文件 node.js)
- const fs = require('fs');
- //封装
- const p = new Promise((resolve, reject) => {
- fs.readFile('路径', 'utf//8', (err, data) => {
- // 处理错误
- if (err) {
- return reject(err);
- }
- resolve(data);
- });
- });
- // 使用
- p.then(res => {
- console.log(res);
- }).catch(err => {
- console.log(err);
- });
- // async 和 await
- const fs = require('fs');
- const axios = require('axios');
- // 1.说明 : async 和 await 是 es8 中提出的新语法
- // 2.作用 : 用 `编写同步代码` 的方式 处理异步 , 处理的更彻底
- // 3. async 和 await 的基本使用 :
- // ① async : 修饰一个函数(内部有异步操作的函数)
- // ==> 格式 : async function fn() { }
- // ② await : 修饰一个异步操作(promise 实例)
- // ==> 格式 : await 异步操作(promise 实例)
- async function fn() {
- //正确执行try里面的代码
- try {
- //axios.get('http://localhost:3000/first') ==> promise 实例
- let data = await axios.get('http://localhost:3000/first');
- console.log('成功操作', data);
- } catch (err) {
- //错误执行catch 里面的代码
- console.log('失败操作');
- }
- }
- fn();
- // 4. 注意点 : ① async 和 await 是成对出现的
- // ② async 和 await 处理异常(报错) 需要配黑 try {} catch() {}
- // ③ async 一定要加载 await 外部最近的一个函数上面
03-es6语法 Promise 和 es8语法 async await 的了解和基本使用的更多相关文章
- JS异步编程 (2) - Promise、Generator、async/await
JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...
- ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await
ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await co ...
- ES6、ES7、ES8语法总结
ES6 1. var let const let,const具有块级作用域,不具有变量提升 const 用于不能被重新赋值的变量 2. 箭头函数 我们经常要给回调函数给一个父级的this 常用办法就是 ...
- ES8之async/await学习随笔
详细学习参考文档: 阮一峰老师的博客,覆盖知识点ES6/7/8/9,本篇学习笔记对阮老师的关于async/await文档中的知识点进行分点总结 在ES8中加入async/await新特性后,很明显带来 ...
- Promise、Generator,Async/await
我们知道JavaScript是单线程语言,如果没有异步编程非得卡死. 以前,异步编程的方法有下面四种 回调函数 事件监听 发布/订阅 Promise对象 现在据说异步编程终极解决方案是——async/ ...
- 事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)
什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
- ES7/ES8 语法学习
作为一个前端开发者,感觉需要学习的东西贼多,ES6刚学会用没多久,又得学习了解ES7/ES8新增的东西,这里是看了大佬们文章的一点点总结以及摘抄的内容,给自己当笔记使用 内容转载自:https://w ...
- ES6、ES7、ES8
ES6 https://es6.ruanyifeng.com/ ES7 1.Array.prototype.includes() includes()作用,是查找一个值在不在数组里,若是存在则返回 ...
随机推荐
- Decode String
Given an encoded string, return it's decoded string.The encoding rule is: k[encoded_string], where t ...
- The base and high address of the custom IP are not correctly reflected in xparameters.h in SDK
This issue has been observed in 2015.3, 2015.4, and 2015.4.1 builds of Vivado. When you create and a ...
- Agiliq署名的免费python书籍
在他们的官网介绍中,说他们团队自2009年开始使用Django,Python,Postgres,Augular等工具来开发webapp,移动应用后台等.并且,他们还有一个Github组织,开源了相当多 ...
- 《剑指offer》扑克牌顺子
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- AFNetWroking 3.0 GET&POST基本使用
``` - (void)requestWithUrl:(NSString *)url params:(NSDictionary *)params methodType:(NSString *)meth ...
- spring-第一章-基本用法
一,简介 spring是一个开源框架 是一个非常强大的容器框架,分离项目组件之间的依赖关系,由spring容器管理整个项目的资源和配置; 通常我们可以称spring是容器大管家(项目大管家) 功能: ...
- zabbix3.0 agent安装配置
zabbix3.0 agent安装配置wget http://repo.zabbix.com/zabbix/3.0/rhel/6/x86_64/zabbix-agent-3.0.0-2.el6.x86 ...
- vue原理20181211
1. 打开浏览器从输入网址到网页呈现出来,经历了什么? 打开浏览器从输入网址到网页呈现出来,经历了什么? 1.1 DNS解析域名 1.2 TCP连接:TCP三次握手 1.3 发送HTTP请求 1.4 ...
- navicat连接centos7上mysql:2003-Can't connect to MySQL server (10060)
问题解决步骤: 1.参考http://jingyan.baidu.com/article/95c9d20dac9040ec4f75617a.html,发现是防火墙未关闭: 2.关闭并禁止firewal ...
- 给JS包写TypeScript用的类型申明文件
TS (TypeScript)区别于JS (JavaScript)一个最大的不同是TS增加了类型.当一些TS代码要使用JS包的时候,最好这些JS包都有类型介绍,比如这个变量是什么类型,那个函数参数的什 ...