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区别

es6 --- promise和async/await的区别相关推荐

一眼看懂promise与async await的区别
// promise方法let p1 = new Promise((resolve,reject) => {setTimeout(() => {resolve('我是p1')},4000) ...
解决异步问题，教你如何写出优雅的promise和async/await，告别callback回调地狱！
解决异步问题--promise.async/await 一.单线程和异步 1.单线程是什么 2.为什么需要异步 3.使用异步的场景二.promise 1.promise的三种状态 2.三种状态的表现 ...
promise 和 async await区别
什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. as ...
angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
promise 、async/await 的原理及实现
前言事件循环机制由于 javascript 引擎是采用单线程运行机制,执行耗时过大的操作时会造成页面的阻塞,为了解决页面的阻塞问题,js 将任务分为同步任务.异步任务,随之而来的是异步带来的执行 ...
setTimeout、setInterval、promise、async/await的顺序详解（多种情况，非常详细~）
本文很长,列举的情况很多. 在阅读本文之前,如果您有充足的时间,请新建一个项目与本文一同实践. 每段代码都有对应的解释,但是自己动手尝试印象才会更深哦~ setInterval:表示多久执行一次,需要 ...
promise和async用法及区别（详解）
一.promise promise的概念 Promise 是异步编程的一种解决方案,是一个构造函数,自身有all.reject.resolve方法,原型上有then.catch等方法. 特点: 对象的 ...
【JavaScript】try/catch和Promise.catch捕捉错误的区别？
[JavaScript]try/catch和Promise.catch捕捉错误的区别? 前言 try/catch 阶段总结 Promise.catch 阶段总结实际应用总结前言 try/catc ...
明明有了 promise ，为啥还需要 async await ？
作者 | Angus安格斯来源 | https://juejin.cn/post/6960855679208783903 为了让还没听说过这个特性的小伙伴们有一个大致了解,以下是一些关于该特性的简要 ...

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

es6 --- promise和async/await的区别相关推荐

最新文章

热门文章