async和await （promise的使用）

原创已于 2022-06-25 23:46:41 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-02-25 15:02:11 首次发布

异步同时被 2 个专栏收录

1 篇文章

订阅专栏

async和await

1 篇文章

订阅专栏

本文讲解了如何在async函数中使用await等待返回Promise的结果，包括成功处理、错误捕获以及Promise.all的运用实例。通过handler和test函数演示了如何在异步环境中获取和处理数据，以及如何利用Promise处理并发和错误情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

await后面接一个会return new promise的函数并执行它
await只能放在async函数里

使用acync 和 await 获取成功的结果

function handler(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await handler()
    console.log(n)
}
test()

async 中的await handler() 函数先执行, test 要在3 秒后执行，test函数为异步

获取失败的结果

function handler(value){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
            if(vslue === 6){
                resolve(sino)
            }else{
                reject(sino)
            }
        }else{
            if(value === 6){
                reject(sino)
            }else{
                resolve(sino)
            }
        }
    })
}
async function test(){
    try{
        //把await及获取它的值的操作放在try里
        let n =await handler(6)
        console.log('大' + n)
    }catch(error){
      //失败的操作放在catch里
        console.log('小' + error)
    }
}
test()

把await 成功后的操作放到try 中，失败的放在 catch 中

使用promise

function handler(value){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
            if(value === 6){
                resolve(sino)
            }else{
                console.log('error')
                reject(sino)
            }
        }else{
            if(value === 6){
                console.log('error')
                reject(sino)
            }else{
                resolve(sino)
            }
        }
    })
}
Promise.all([handler(6),handler(6)])
.then(
    (x)=>{console.log(x)},
    (y)=>{console.log(y)}
)

promise.all 里面跟一个数组，数组的每一项都是一个promise 的函数调用， then的第一个参数是所有的promise都成功后调用，拿到所有promise的结果是一个数组；第二个参数拿到的是第一个失败的值

使用await

async function test(){
    try{
        let n = await Promise.all([handler(6),handler(6)])
        console.log("xxx")
    }catch(error){
        console.log(error)
    }
}
test()

async 会返回一个成功的 promise对象 resolved(成功的状态值)

如果没有resolved() 抛出，await 就拿不到结果, xxx打印不出来