异步函数（asyncawait）
Promise和异步函数两者的区别
1. Promise的出现解决了传统callback函数导致的“回调地狱”问题，但它的语法导致了它向纵向发展⾏成了⼀个回调链，遇到复杂的业务
场景，这样的语法显然也是不美观的。⽽async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能⼒的语法糖，只有这⼀句代码执⾏完，才会执⾏下⼀句。
2. async await与Promise⼀样，是⾮阻塞的。
3. async await是基于Promise实现的，可以说是改良版的Promise，它不能⽤于普通的回调函数。
个⼈理解，await 的异步代码，会使程序在执⾏完后再继续向下执⾏，async 加在距离await最近的函数声明/函数表达式/箭头函数/⽅法上。
async 关键字⽤于声明异步函数。这个关键字可以⽤在函数声明、函数表达式、箭头函数和⽅法上
async function foo() {}
let bar = async function() {};
let baz = async () => {};
class Qux {
async qux() {}
}
通过async/await 关键字可以让代码看起来是同步代码的（代码按顺序写），使代码更加地优雅，实际上是异步执⾏的。await后⾯的异步代码执⾏完后，才会执⾏下⾯的代码（下⾯的代码异步或者同步代码在Promise中写在.then()⽅法中）。
//⽤于模拟请求耗时，默认为2s
const sleep = (timeout = 2000) =>
new Promise(resolve => {
setTimeout(resolve, timeout)
})
async function getResultOne() {
await sleep();  //模拟请求耗时2s  await实现sleep()函数执⾏完后再执⾏下⾯的代码
const res = ('uch/weather_mini?city=⽆锡');
return res;
}
async function getResultTwo() {
await sleep();
const res = ('uch/weather_mini?city=扬州');
return res;
}
/
/ 异步串⾏⼀个异步操作结束后进⾏下⼀个异步操作(当第⼆个异步请求依赖第⼀个异步的请求结果时可以这样写)
// const showResult = async () => {
//    console.time('showResult');
//    const r1 = await getResultOne();
//    const r2 = await getResultTwo();
//    console.log(r1);
//    console.log(r1.data.data.city);
//    console.log(r2.data.data.city);
//    console.timeEnd('showResult');  //4045ms
// }
//实现异步并⾏，await控制执⾏顺序(当第⼀个和第⼆个异步请求互不影响时这样写可以提⾼性能)
const showResult = async () => {
console.time('showResult');
const r1Promise = getResultOne();
const r2Promise = getResultTwo();
console.log(r1Promise);
const r1 = await r1Promise;
const r2 = await r2Promise;
console.log(r1.data.data.city);
console.log(r2.data.data.city);
console.timeEnd('showResult');  //2024ms
}
showResult();
写法⼀是第⼀个异步请求执⾏完后再执⾏第⼆个异步请求，相当于串⾏，
如果两个请求互不影响，可以使⽤写法⼆，让两个异步请求并⾏，节省时间。写法⼆也可以通过Promise.all()实现
function showResult() {
console.time('showResult');
Promise.all([
getResultOne(),
await和async使用方法
getResultTwo()
]).then(results => {
console.log(results);
console.timeEnd('showResult');  //2020ms
})
}
showResult();
将Promise.all()的then()改善称async/await async function showResult() {
console.time('showResult');
const results = await Promise.all([
getResultOne(),
getResultTwo()
])
console.log(results);
console.timeEnd('showResult');  //2077ms
}
showResult();

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。