es6 --- promise和async/await的区别

首先需要了解async函数:

async是Generator函数的语法糖:

// 使用Generator依次读取两个文件
var fs = require('fs');
var readFile = function (fileName) {return new Promise(function (resolve, reject) {fs.readFile(filename, function(error, data) {if (error) return reject(error)resolve(data);});});
};// Generator
var gen = function* () {var f1 = yield readFile('/etc/fatab');var f2 = yield readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());
};// async
var ayncReadFile = async function () {var f1 = await readFile('/etc/fatab');var f2 = await readFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());
};// async对Generator函数做了以下4点改变:
// 1. 内置执行器:async函数自带执行器,使用方法为 asyncReadFile()
// 2. 更好的语义: async表示函数里有异步操作,await表示紧跟再后面的表达式需要等待结果
// 3. 更广的适用性:yield命令后,只能是Thunk函数或Promise对象,而async函数的await命令后面,可以是Promise对象和原始类型的值
// 4.返回值是Promise对象,可以使用then方法指定下一步操作.// 注:async函数完全可以看作由多个异步操作包装成的一个Promise,而await命令就是内部then命令的语法糖.

async函数的用法:

// 输入name返回股票的价格
async function getStockPriceByName(name) {var symbol = await getStockSymbol(name);var stockPrice = await getStockPrice(symbol);return stockPrice;
}
getStockPriceByName('goog').then(function (result) {console.log(result);
});
// 非常同步的写法!
// 从宏观上来讲,执行getStockPriceByName后,输入名字,会得到一个stockPrice,而stockPrice是一个Promise数据结构,
// 其可以使用.then方法调用.// async封装接口.
function timeout(ms) {return new Promise((resolve) => {setTimeout(resolve, ms);});
}
async function asyncPrint(value, ms) {await timeout(ms);console.log(value);
}asyncPrint("Hello", 50);

async的语法:

// async函数返回一个Promise对象
async function f() {return 'hello world';
}
fn().then(v => console.log(v))// async函数内部抛出的错误会导致返回的Promise对象变为reject状态,
async function f(){throw new Error('出错了');
}
f().then(v => console.log(v),e => console.log(e)
)

async的错误处理:

// 如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject.
async function f() {await new Promise(function (resolve, reject) {throw new Error('出错了');});
}
f()
.then( v => console.log(v))
.catch( e => console.log(e))// async置于try...catch代码块中
async function f() {try{await new Promise(function (resolve, reject) {throw new Error('出错了');});} catch (e) {}return await('hello world');
}// 多个await命令,同一放入try...catch结构中
async function main() {try {var val1 = await firstStep();var val2 = await secondStep(val1);var val3 = await thirdStep(val1, val2);console.log('Final: ', val3);}catch (err) {console.error(err);}
}// 使用try...catch结构,多次尝试连接获取某个url下的数据
const superagent = require('superagent');
const NUM_RETRIES = 3;async function test() {let i;for (i =0; i < NUM_RETRIES; ++i) {try {await superagent.get('http://google.com/this-throws-an-error');break;} catch(err) {}}cosnole.log(i);    // 3
}
test();

async使用注意点:

// 1.await命令后面的Promise对象的运行结果可能是rejected,所以最好把await命令放在try...catch代码块中
// 写法一
async function myFunction() {try{await somethingThatReturnsAPromise();} catch (err) {console.log(err);}
}
// 写法二
async function myFunction() {try{await somethingThatReturnsAPromise().catch(function(err){console.log(err);});}
}// 2.多个await命令后面的异步操作如果不存在继发关系,最好让它们同时触发
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);// 写法二
// let fooPromise = getFoo();
// let barPromise = getBar();
// let foo = await fooPromise;
// let bar = await barPromise;// 3.await命令只能用在async函数之中,如果用在普通函数中就会报错
async function dbFunc(db) {let docs = [ {}, {}, {] ];// 报错docs.forEach(function (doc) {await db.post(doc);});
}
// 报错的原因在于,async用在普通函数function(doc)之中.
// 考虑forEach的参数改为async 函数,
function dbFunc(db) {let docs = [ {}, {}, {} ];docs.forEach(async function(doc) {await db.post(doc);});
}
// 注:forEach是并发执行的,因此以上还是会报错.// 如果想继发的将doc推入db.post,可以采用for...of...
function dbFunc(db) {let docs = [ {}, {}, {} ];for (let doc of docs) {await db.post(doc);}
}// 使用Promise.all 执行并发
function dbFunc(db) {let docs = [ {}, {}, {} ];let promises = docs.map( (doc) => db.post(doc));let results = Promise.all(promises);console.log(results);
}// 使用for...of的 并发执行
function dbFunc(db) {let docs = [ {}, {}, {} ];let promises = docs.map( (doc) => db.post(doc));let results = [];for (let promise of promises) {results.push(promise);}console.log(results);
}

promise与async/await的区别:

// 1.错误处理:Async/await使得处理同步 + 异步成为了现实
//           在try/catch中,难以处理JSON.parse抛出的错误,原因在于,这个错误发生在Promise内部.
//           要处理以上错误,只能在Promise外面套上一层try...catch
//           async/await,后面的异步操作若出错,那么等同于async函数返回的Promise对象被reject// Promise   try...catch
const makeRequest = () => {try {getJSON().then(result => {const data = JSON.parse(result);console.log(data);})} catch (err) {console.log(err)}
}
// 使用async/await
const makeRequest = () => {try {const data =JSON.parse(await getJSON())console.log(data)} catch (err) {console.log(err)}
}	// 2.条件判别 (Conditionals):根据得到的数据决定下一步操作
const makeRequest = () => {return getJSON().then(data => {if ( data.needsAnotherRequest) {return makeAnoterReuqest(data).then(moreData => {console.log(moreData)return  moreData})} else {console.log(data);return data;}})
}
// 以上就2次就嵌套得如此深,要是10次...100次......
// 使用async可以很好的写出可维护性代码
const makeRequest = () => {const data = await getJSON();if( data.needsAnotherRequest) {const moreData = await makeAnotherRequest(data);console.log(moreData)return moreData} else {console.log(data);return data;}
}
// 可读性和可维护性更强!// 3.对中间的值的使用更简单]
// promise
const makeRequest = () => {return promise1().then (value1 => {return promise2(value1).then( value2 => {return promise3 (value1, value2)})})
}// async
const makeRequest  = () => {const value1 = await promise1()const value2 = await promise2(value1)const value3 = await promise3(value1, value2)return value3
}
// 我天,,,同步的写法,,!! 简单明了,好维护!  

参考《ES6标准入门》(第3版) P375~P385
参考 ES6 Async/Await与Promise区别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251080.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ueditor百度编辑器中的 setContent()方法的使用

百度编辑器Ueditor所提供的setContent()方法作用是&#xff1a;设置或者改变编辑器里面的文字内容或html内容 函数说明&#xff1a;setContent(string,boolean); 参数string 是需要设置到编辑器里面的内容&#xff0c;可以含有HTML代码&#xff0c;最后插入到编辑器中的内容是经…

小程序UI

从input组件说起 <input maxlength"10" placeholder"最大输入长度10" /> <div id"wrapper" disabled$"{{disabled}}">\n <p id"placeholder" class$"{{_getPlaceholderClass(placeholderClass)}}"…

61-1 认识webpack

认识webpack 面向过程开发的不便引入外部js执行顺序面向对象开发 加载多个文件耗时更多 增加了http请求 引入过多js变量来源不明 优化 使用前先import 但使用import语法需要借助工具webpack翻译为浏览器可以解析的语法安装node自动携带npmwebpack若没有全局安装 需要使用npx…

css font简写

一、字体属性主要包括下面几个 font-family&#xff0c;font-style&#xff0c;font-variant&#xff0c;font-weight&#xff0c;font-size&#xff0c;fontfont-family&#xff08;字体族&#xff09;: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style&…

javascript --- 原生的拖拽功能实现

准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class"drag" style"width:100px;height:100px;top:0;left:0"></div>监听鼠标的按住事件: let dragDiv document.getElementsByClassName…

web安全学习-验证机制存在的问题

验证机制是应用程序防御恶意攻击的中心机制。它处于防御未授权的最前沿&#xff0c;如果用户能够突破那些防御&#xff0c;他们通常能够控制应用程序的全部功能&#xff0c;自由访问其中的数据。缺乏安全稳定的验证机制&#xff0c;其他核心安全机制&#xff08;如回话管理和访…

ES5-拓展 原型链、继承、类

Symbol不是构造函数 Object不是原型是实例对象 他的构造器继承原型上的构造器 undefined是未定义 null是空指针 一、原型链 1. 函数也是实例对象 2. 构造函数Object是由Function构造出来的 3. 有一种说法是&#xff0c;原型链的终点是null Object.prototype.__proto__指向nul…

Mysql中各种与字符编码集(character_set)有关的变量含义

mysql涉及到各种字符集&#xff0c;在此做一个总结。 字符集的设置是通过环境变量来设置的&#xff0c;环境变量和linux中的环境变量是一个意思。mysql的环境变量分为两种&#xff1a;session和global。session变量是仅在这次会话红中有效&#xff0c;在mysql中&#xff0c;一次…

spring boot 加载application配置文件

这就要注意了 转载于:https://www.cnblogs.com/huochaihe/p/9397849.html

javascript --- 防抖与节流

先做一个监听鼠标移动的base: <style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;} </style> <div id"content"></div> <script>let content document.getElementById…

DOM-9 【实战】模块化开发Todolist(面向过程)

模块化分类 按dom结构划分按功能划分&#xff08;组件化开发&#xff09; 模块与模块之间可以相互依赖&#xff0c;但互不影响 模块&#xff1a;IIFE赋值给一个变量&#xff0c;当引入模块时&#xff0c;IIFE会立即执行 单标签闭合才符合W3C规范display、position放在上面css是…

mysql在linux下的安装(5.7版本以后)

1.添加mysql组和mysql用户&#xff0c;用于设置mysql安装目录文件所有者和所属组。 ①groupadd mysql ②useradd -r -g mysql mysql 2.将二进制文件解压到指定的安装目录&#xff0c;通用的/usr/local ①解压二进制文件&#xff0c; tar -zxvf /usr/local/mysql-5.7.13-linux-…

Kali Linux2018 上安装open-vm-tools实现虚拟机交互

最新的kali linux2018已经不再支持原有的vmwaretools&#xff0c;即使安装了也不能实现主机与客户机之间的交互&#xff08;比如从主机复制文件到客户机&#xff09;。安装open-vm-tools替代vm tools能够完美实现“自动适应客户机”&#xff08;即自动适应客户机的分辨率&#…

DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装

鼠标行为 e.属性含义相关属性clientX/Y鼠标位置相对于当前可视区域的坐标x/y&#xff08;FF火狐部分版本不支持&#xff09;pageX/Y(IE9以下不支持)鼠标位置相对于当前文档的坐标layerX/Y (IE11以下同clientX/Y)screenX/Y鼠标位置相对于显示器屏幕的坐标offsetX/Y鼠标位置相对…

java --replaceAll方法

public void abc(){String str "aabbccdd";str str.replaceAll("\\d","数字")&#xff1b;system.out.println("str"); } 转载于:https://www.cnblogs.com/gjack/p/8325778.html

mysql分页优化

一般分页这样写 select * from goods limit 50,20 从50行开始取20行&#xff0c;即第51行到70行 当数据量少当时候这样并没有什么问题&#xff0c;但是如果 select * from goods limit 1000000,20 查询耗时骤升。 这种方式是查询出100000020行&#xff0c;再取20行&#xff0c;…

DOM-10 面向对象开发Todolist

将插件配置项写在html的div里&#xff0c;data-config自定义属性&#xff0c;外单引号&#xff0c;内双引号&#xff08;内部是JSON字符串&#xff09; <div class"todo-wrap" data-config{"plusBtn":"j-show-input","inputArea":…

计网 --- 域名服务系统:因特网的目录服务

主机名: // 主机的一种标识方法如: cnn.com www.yahoo.com gaia.cs.umass.edu cis.poly.edu主机名可能由不定长的字母数字组成,路由器难以处理.由于这些原因, 主机也可以使用IP地址(IP address) 进行标识 // 简略介绍ip地址 // 一个IP地址由4个字节组成,并有着严格的层次结构…

Ansible基础概述

一、Ansible简介 Ansible基于Python语言实现&#xff0c;由paramiko和PyYAML两个关键模块构建。Ansible的编排引擎可以出色地完成配置管理&#xff0c;流程控制&#xff0c;资源部署等多方面工作。Ansible公司负责Ansible开源软件的维护&#xff0c;管理。一般软件的更新大概每…

selenium浏览器驱动下载地址整理

今天把手头有的一些关于selenium测试的资源整理了一下&#xff0c;分享出来。 1. 所有版本chrome下载 是不是很难找到老版本的chrome&#xff1f;博主收集了几个下载chrome老版本的网站&#xff0c;其中哪个下载的是原版的就不得而知了。 http://www.slimjet.com/chrome/google…