注册 登录

清河洛

javascript中的async和await操作符简介

qingheluo2021-04-23清河洛308
async操作符用于创建一个异步函数,await操作符用于等待一个Promise对象async操作符在函数创建语句前添加async操作符可以把函数转化为异步函数,异步函数的特点:异步函数永远只会返回一个Promise 1、当函数中显示的return一个Promise时返回该Promise 2、如果return的是一个具体的值,会返回一个resolve为该值的Promise 3、如果使用了throw语句那么会返回一个reject为该值的Promise 3、其他情况下会转换为一个resolve为undefined的Promise</pre><strong>await操...

async操作符用于创建一个异步函数,await操作符用于等待一个Promise对象

async操作符

在函数创建语句前添加async操作符可以把函数转化为异步函数,异步函数的特点:

异步函数永远只会返回一个Promise
1、当函数中显示的return一个Promise时返回该Promise
2、如果return的是一个具体的值,会返回一个resolve为该值的Promise
3、如果使用了throw语句那么会返回一个reject为该值的Promise
3、其他情况下会转换为一个resolve为undefined的Promise</pre><strong>await操作符</strong>

在异步函数中使用await操作符表示等待一个值的返回

await右侧为Promise对象时返回的是Promise状态为resolve的值,如果Promise状态是reject,则无返回值(undefined)并且抛出异常。
await右侧为其他值,会直接将该值作为await的返回值

注意点:

1、await只能在async函数中使用,但是async函数中可以没有await
2、如果await的Promise状态是reject会抛出异常,可以通过try...catch语句来捕获

实例:

let p = new Promise(
    (resolve, reject)=>{
        fetch('https://www.domain.com/fdgfdg/sfsf')
            .then(response =>{
                if(response.ok){
                    resolve("访问网站成功");
                }else{
                    reject("访问网站失败");
                }
            })
            .catch(err=>{
                reject("其他错误");
            })
    }
)

async function demo1 (){
    let test = await p;
    console.log('获取到p的值:'+test);
    console.log('执行了后面的执行语句');
}

async function demo2(){
    try{
        let test = await p;
        console.log('获取到p的值:'+test);
    }catch(e){
        console.log('获取p值失败:'+e);
    }
    console.log('执行了后面的执行语句');
}


网址导航