async 函数
一、含义
ES2017 标准引入了 async 函数，使得异步操作变得更加方便。
async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
返回值是 Promise。
async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
异步编程的最高境界，就是根本不用关心它是不是异步。
二、基本用法
async函数返回一个 Promise 对象，可以使用then方法添加回调函数。
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，
再接着执行函数体内后面的语句。
async function getData(name){
let res = await $.get('https://www.easy-mock.com/mock/5bfb5eadb88b2a71b0d2d024/query',{name:name},function(result){
// console.log('jq获取后的值',result);
})
console.log('res',res);
console.log('同步代码');
let res2 = await $.get('https://www.easy-mock.com/mock/5bfb5eadb88b2a71b0d2d024/query2',function(resutl2){
// console.log('第二异步',resutl2);
})
console.log('res2',res2);
return [res,res2]; // 这里要return 后then才能获取到值;
}
getData('wei').then((res)=>{
console.log('最后结果',res);
})
// res {data: {…}}
// 同步代码
// res2 {data: {…}}
// 最后结果 (2) [{…}, {…}]
三、语法
async函数的语法规则总体上比较简单，难点是错误处理机制。
1. 返回 Promise 对象
1. async函数返回一个 Promise 对象。
2. async函数内部return语句返回的值，会成为then方法回调函数的参数。
3. async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
async function f() {
throw new Error('出错了');
}
f().then(
v => console.log('resolve', v),
e => console.log('reject', e)
)
//reject Error: 出错了
2.Promise 对象的状态变化
async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，
除非遇到return语句或者抛出错误。
也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
3. await 命令
- 正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。
- 如果不是 Promise 对象，就直接返回对应的值。
- await命令后面是一个thenable对象（即定义了then方法的对象），那么await会将其等同于 Promise 对象。
- 任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。
- 有时，我们希望即使前一个异步操作失败，也不要中断后面的异步操作。
这时可以将第一个await放在try...catch结构里面，这样不管这个异步操作是否成功，第二个await都会执行。
另一种方法是await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。
4. 错误处理
如果有多个await命令，可以统一放在try...catch结构中。
async function main() {
try {
const val1 = await firstStep();
const val2 = await secondStep(val1);
const val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}
5.注意点
1. 前面已经说过，await命令后面的Promise对象，运行结果可能是rejected,最好把await命令放在try...catch代码块中。
2. 多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
// 继发执行 (前一条请求返回结果再执行下一条数据)
async function sendUrl(){
var urls=[
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query001",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query002",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query003",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query004",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query005"
];
for(const url of urls){
var res = await $.get(url);
console.log(res);
}
}
3. await命令只能用在async函数之中，如果用在普通函数，就会报错。
4. async 函数可以保留运行堆栈。
const a = async () => {
await b();
c();
};
b()运行的时候，a()是暂停执行，上下文环境都保存着。一旦b()或c()报错，错误堆栈将包括a()。
6.async await 函数嵌套
let a = function(){
...
await this.$axios.get();
}
async function(){
await this.a();
...;
}()
四、实例：按顺序完成异步操作
实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组 URL，然后按照读取的顺序输出结果
async function logInOrder(urls) {
// 并发读取远程URL
const textPromises = urls.map(async url => {
const response = await fetch(url);
return response.text();
});
// 按次序输出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}
上面代码中，虽然map方法的参数是async函数，但它是并发执行的，
因为只有async函数内部是继发执行，外部不受影响。后面的for..of循环内部使用了await，因此实现了按顺序输出
// 并发执行;
async function aysendUrl(){
var urls=[
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query001",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query002",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query003",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query004",
"https://www.easy-mock.com/mock/5f87b4a64dc90c6644514b1c/example/test/query005"
];
var resArr = urls.map(async url => {
return await $.get(url);
});
for(const item of resArr){
console.log(await item);
}
}
是不是很妙
