1、async函数的定义
菜鸟教程中描述的是async是ES7才有的与异步的关键字，和Promise，以及Generator有些关联的，当ES7标准引入async函数的时候，使得处理异步操作更加的方便了。异步问题在js发展过程中一直有人尝试提出更加合理舒适的解决方案，从一开始的Promise，再到Genetor函数，直至现在的async，目前async也被视为最佳的。
2、async的优点
- 内置执行器：async函数自带执行器，这样我们使用async的时候就像使用普通函数一样写就行了
- 语义更加便于理解：比起之前的Promise等，async表示执行异步的函数操作，await表示等待执行结果。更加便于理解。
- 适用性更广：async函数后的await，可以跟Promise对象和一些基本数据
- 返回值为Promise：async函数的返回值是Promise对象
3、async的使用
async函数使用的时候只需要在需要执行的异步操作前加上async，然后结果前加await即可。如：
// async表示需要进行的异步操作
async function fn(a,b){
let num = await a + b; // await等待结果出来了再处理
return num;
}
let result = fn(2,11);
console.log(result)
async的使用.png
4、async返回Promise对象处理
async function fn(a,b){
let num = await a + b;
return num;
}
let result = fn(2,11); // 返回的是一个Promise对象
// 既然是Promise的话那么就可以使用then() catch() 等方法
result.then( res => {
console.log(res);
})
使用then方法的结果打印.png
5、async的then()方法的使用
async function fn(a, b) {
let num = await a+b;
return num;
}
let sucRes = fn(8, 10);
// 执行a=8的打印
sucRes.then( res => {
console.log(res);
}).catch( err => {
console.log(err);
})
执行成功的then()方法.png
6、async的catch()方法使用
async function fn(a, b) {
if (a < 5) {
throw new Error("数据过小,请重新输入....");
} else {
let num = await a+b;
return num;
}
}
let errRes = fn(2, 11); // 返回的是一个Promise对象
// 执行a=2的结果
errRes.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err); //打印报错信息
});
async的catch操作.png
7、async的特点
- await只能在async函数中使用，因为async表示的是该函数内有异步的操作，而后才有的await去等待异步处理结果的过程。
- await后面可以是Promise对象，也可以是一些基本类型的数据，比如：数字，字符串，布尔值等
- async返回的值是一个Promise，结果见上面的截图.
- 只要await语句后面的Promise的状态变成reject，那么async函数会中断执行.
8、async中的await后面使用的是Promise对象
上面说到了，await后面可以接很多数据类型，之前可以去接受一些基本的数据，现在如果接受的是Promise对象的话那该如何处理呢？
async function fn(judge){
// 判断judge是否属于Number类型
if(typeof judge == 'number'){
let sucRes = await Promise.resolve(judge+'属于Number类型');
return sucRes
}else if(typeof judge == 'string'){
let errRes = await Promise.reject(judge+'禁止是一个String类型');
return errRes;
}else{
console.log(judge + '是其他类型')
}
}
//是数字类型
fn(123).then( res => {
console.warn(res)
}).catch( err => {
console.log(err);
})
打印结果[Number类型].png
// 是字符串类型
fn('123').then( res => {
console.warn(res)
}).catch( err => {
console.error(err);
})
打印结果[String类型].png
// 是对象类型
fn({ name:'123' }).then( res => {
console.warn(res)
}).catch( err => {
console.error(err);
})
打印结果[其他类型].png
9、如果await后面的语句先执行reject，那么整个函数会中断执行
async function fn(judge){
// 判断judge是否恒等于5
if(Object.is(judge,5)){
let sucRes = await Promise.reject('judge等于5');
let data = await Promise.resolve(judge);
console.log(data);
return sucRes
}
}
// 是对象类型
fn(5).then( res => {
console.warn(res)
}).catch( err => {
console.error(err);
})
打印结果.png
根据上面的截图可以看出来，data根本就没执行打印。
10、解决async中的报错处理
async异步函数执行的过程中，可能会抛出错误，从而会影响后面的代码的执行，因为如上面的测试代码所展示的，如果前面的代码先报异常执行了reject，那么后面的代码可能会什么都没做，影响整体代码的执行过程。
下面是一些解决方案：
10.1、使用try{ }catch{ }
async function fn(judge) {
// 判断judge是否恒等于5
if (Object.is(judge, 5)) {
try {
let sucRes = await Promise.reject("judge等于5");
return sucRes;
} catch {
let data = await Promise.resolve(judge);
return data;
}
}
}
fn(5).then((res) => {
console.warn(res);
})
.catch((err) => {
console.error(err);
});
打印到了data.png
10.2、添加catch捕获错误
这种解决方案适合Promise对象只有一两个的时候用比较好，当Promise对象比较多的时候，这个就显得不太适用了，因为不可能给每一个Promise去添加catch.
async function fn(judge) {
// 判断judge是否恒等于5
if (Object.is(judge, 5)) {
let sucRes = await Promise.reject("judge等于5").catch( err => {
console.log(err);
})
let data = await Promise.resolve(judge);
console.log(data);
return sucRes;
}
}
fn(5)
执行结果.png
10.3、集中处理
将所有的await的地方都try{}catch{}集中一起处理
try {
let f1 = await Promise.resolve('成功了');
let f2 = await Promise.resolve('成功了');
let f3 = await Promise.reject('出错了');
}catch(e){}
