【九月打卡】第2天 前端工程师2022版

课程名称：async 函数

课程章节：async 函数的返回值、 async 函数的各种形式 和 async 函数的注意事项

课程讲师： Alex

课程内容：

1、 async 函数的返回值

我们先写一个普通函数，看看它的返回值是什么

function fn(){
//return undefined
}
console.log(fn());   //undefined

通过看控制台可以看出，打印的是undefined 虽然函数里没写 return ，但是我们一般默认它 return undefined

好了，现在，我们在函数前面加上async 把它变成async 函数，再来看看它返回的是什么

async function fn(){
   return (123)
}
console.log(fn());

看图可知，返回的是 promise 对象

所以 async 函数的返回值是 Promise 对象

如果返回的不是promise对象，就相当于在外面包了一层promise

如果嫌繁琐还可以写成

async 函数内部 return 后面的值，如果不是 Promise 对象，相当于包了一层 Promise.resolve() 再返回；如果是promise对象就直接返回该 Promise 对象

2、 async 函数的各种形式

函数声明

function fn(){}  //普通函数
async function fn(){} //异步

函数表达式

const fn = function(){}  //一般
const fn = async function(){}

箭头函数

const fn = () => {}  //一般
const fn = async () => {}
const fn = param => {}  //有参数情况
const fn = async param => {}

对象的方法

const obj ={
            fn:function(){} //普通
            fn: async function(){} 

            fn:()=> {}  //箭头函数
            fn: async ()=> {} 

            fn(){}  //新写法
            async fn(){}
        }

Class 的方法

class ClassName {
            fn(){}  //普通
            async fn(){} //异步
        }
        new ClassName().fn();  //使用
        console.log(new ClassName().fn());

3async 函数的注意事项

通过学习，我们知道，async 函数无论返回一般值还是Promise对象，得到的都是成功状态的promise对象，但是在开发中不可能总是成功，也有失败。那么怎么才能返回失败状态呢？

①手动返回失败

async function fn(){
            // return 123;

            return Promise.reject(new Error('出错了'))
        }
        console.log(fn());

②手动抛出错误

async function fn(){
            throw new Error('出错了');
        }
        fn().catch(err => {
            console.log(err);
        })

这样依然可以捕获错误

捕获错误的方式，还可以用 try ... catch

async function fn(){      
            try{
                throw new Error('出错了'); 
            }catch(error){
                console.log(error,'try...catch');
            }
        }
        fn().catch(err => {
            console.log(err);
        })

1、可以通过 try...catch 或者 Promise...catch 的方式来处理错误

2. async 函数中可以没有 await

课程收获：

老师讲的非常细致，通俗易懂。这一节学的是 async 函数的用法，通过学习我了解了什么是 async 函数的返回值、async 函数的几种形式以及 async 函数的注意事项 。知道，async 并不是一定要和 await 一起用，期待明天学习 await