async和await的使用

async和await是promise的一种语法糖,也就是更简单易懂的写法。

在很多项目中,你会经常看到async和await的配合使用,看到原始的promise写法反而不多,就是因为async-await这种写法是用同步的语法去实现异步的逻辑。

基础使用

原生promise写法

javascript 复制代码
        let value = null
        let proFn = new Promise((resolve,reject)=>{
            setTimeout(()=>{
              resolve('成功的值')
            },2000)
        })
        proFn.then(res=>{
            value = res
            console.log(value,'异步返回值')
            //...value获取到了值,可以处理后续的业务逻辑
        })

async和await的写法

javascript 复制代码
        let proFn = ()=>{
            return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('成功的值')
            }, 2000)
        })
        } 
        async function getVal(){
            let value = await proFn() //这条语句执行完毕,后续的代码都需要等value获取到了promise返回的值,才会开始去执行
            console.log(value,'获取到了值')
            //...可以执行后续的业务
        }
        getVal()

两者执行结果都是一样的

async

作用

async需要在函数上使用,本质是Generator 函数的语法糖。

一旦某个函数使用了async,那么这个函数的返回值就会被包装成一个promise函数

javascript 复制代码
        let fn = async function(){
            return '函数返回值'
        }
        console.log(fn(),'调用fn函数')
        fn().then(res=>{
            console.log(res,'获取值')
        })

语法

async写在函数定义的时候,可以有如下写法

javascript 复制代码
        let fn1 = async function(){
            return '普通函数1'
        }
        async function fn2(){
            return '普通函数2'
        }
        async ()=> '箭头函数'
        class Fn{
            constructor(){

            }
            async fn(){
                return '类中的方法'
            }
        }

await

使用条件

await是不可以单独去使用的,是需要和async函数去配合使用的

javascript 复制代码
        let pro = function(){
            return new Promise(res=>{
                res('成功的值')
            })
        }
        let value = await pro()

参数类型

await命令后面可以绑定两种类型的参数,一种是常规类型,一种是promise类型

javascript 复制代码
        let pro = async function(){
            let value = await '常规值'
            console.log(value,'await返回常规值')
        }
        pro()
javascript 复制代码
        let pro = async function(){
            let value = await new Promise(res=>{
                setTimeout(()=>{
                    res('promise执行成功的值')
                },3000)
                
            })
            console.log(value,'await绑定promise实例')
        }
        pro()

处理错误

async-await在处理错误时,可以使用try catch语法配合

javascript 复制代码
        async function pro(){
            try{
               let value =  await new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    // resolve('成功')
                    reject('失败')
                },3000)
            })
            return value
        
            }catch(error){
              console.log(error,'进入catch')
              return error
            }

        }
        pro().then(res=>{
            console.log(res,'执行完毕')
        }).catch(error=>{
            console.log(error,'报错回调')
        })
相关推荐
掘金安东尼13 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~15 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务18 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛18 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑21 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭27 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿32 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨41 分钟前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js