JS异步函数async和await

一、async的用法

async用于声明异步函数它以类似同步的方式来写异步方法,语法与声明函数类似:

async function fun(){
	return "Hello Word!";
}

他的调用与函数相同:

async function fn(){
    return "Hello Word!";
}

console.log(fn());

async的返回结果是一个Promise对象,如果 return 的值是除Promise 以外的任何值,都算是成功的,都会调用Promise.resolve() 方法,所以他的输出结果为:
在这里插入图片描述

如果返回的值是Promise 或者错误,都会调用 Promise.reject() 方法:

async function fn(){
    return new Promise((resolve,reject) => {
         reject('Error'); 
    })
}

或者

 async function fn(){
     throw new Error('rejected');
 }
 
 console.log(fn());

结果为:
在这里插入图片描述

在这里插入图片描述

要获取 async 函数的返回结果,就需要用到 Promisethencatch 来获取
then获取成功的结果:

async function fn(){
    return "Hello Word!";
}

fn().then(data => console.log(data));

结果:
在这里插入图片描述
catch获取失败的结果:

 async function fn(){
     throw new Error('rejected');
 }

fn().catch(data => console.log(data));

结果:
在这里插入图片描述
如果async函数调用时注册了回调函数,那么注册的回调函数就会被放到异步队列中,主线程会先执行下面的代码,再回来执行async函数:

async function fn(){
   return "Hello Word!";
}
fn().then(data => console.log(data));
console.log("1");
console.log("2");
console.log("3");
console.log("4");
console.log("5");

结果:
在这里插入图片描述
不注册回调函数:

async function fn(){
   console.log("Hello Word!");
}
fn();
console.log("1");
console.log("2");
console.log("3");
console.log("4");
console.log("5");

结果:
在这里插入图片描述

所以,async 函数与普通函数的使用并无区别,唯一的区别就是返回值是 Promise 对象

二、await 的用法

await 函数只能放到 async 函数里面。

  • await 右侧的表达式一般为 Promise 对象,也可以是其他值。
  • 如果是Promise对象,await返回的是Promise成功的值。
  • 是其他值,就直接将此值作为 await 的返回值。

注意

  • await 必须写在 async 函数中,但 async 函数可以没有 await
  • 如果 awaitPromise 失败了,就会抛出异常,需要通过 try...catch 捕获处理

执行顺序

如果同步代码与异步代码同时出现,一定是先执行同步代码

function fn1(){
    return "1";
}
async function fn2(){
    return "2";
}
async function fn(){
    let a = await fn1();
    console.log("3");
    let b = await fn2();
    console.log(a,b);
    console.log("4");
}
fn();
    
console.log("5");

输出结果为:
在这里插入图片描述
代码的执行过程:

调用 fn() 函数,遇到 await 执行异步操作,先执行同步中的console.log(“5”);执行完毕后回来继续执行异步,输出1,然后输出3,遇到 await 执行异步并且阻断后续执行,执行完毕后输出1 2,最后输出4

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript中,异步请求通常使用async和await关键字来处理。async函数相当于生成器的语法糖,而await关键字用于暂停代码的执行,以等待异步操作的完成。以下是使用async和await处理异步请求的几种常见方式: 1. 单个异步请求:使用Promise。 例如:`async function fetchData() { const response = await fetch('url'); const data = await response.json(); return data; }` 2. 多个并行的异步请求:使用Promise.all或Promise.race。 例如:`async function fetchMultipleData() { const promises = [fetch('url1'), fetch('url2'), fetch('url3')]; const responses = await Promise.all(promises); const data = responses.map(response => response.json()); return data; }` 3. 多个串行的异步请求:使用async和await的链式操作。 例如: ``` async function fetchSequentialData() { const response1 = await fetch('url1'); const data1 = await response1.json(); const response2 = await fetch('url2'); const data2 = await response2.json(); return [data1, data2]; } ``` 总结来说,使用async和await可以简化异步请求的处理,使代码看起来更加同步和易于理解。您可以根据具体的需求选择合适的方式来处理异步请求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [深入浅出JS—21 异步代码处理方案之async-await](https://blog.csdn.net/qq_36154157/article/details/124838720)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [JS异步编程(async、await详解)](https://blog.csdn.net/weixin_46240162/article/details/113531714)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端mz小詹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值