async与await作用

一、什么是async和await

async是ES7中新增内容,对于异步操作的解决方案,它是Generator函数的语法糖。

  • async|await是编写异步的新方法,之前ES6中用的是promise。
  • async|await是建立在promise基础之上的新写法。
  • async|await也是非阻塞的。

async和await它们两有一个严格规定,两者都离不开对方,但是,await只能写在async函数中。

二、用法

async如何处理返回值
async的返回值是一个promise对象,也就是说它会直接通过promise中的方法将返回值封装成一个promise对象。

async function Async() {
return "hello world";
}
const result = Async();
console.log(result);

在这里插入图片描述
从结果看来async函数返回的是promise对象,它会直接将返回值封装成一个promise对象。

如果没有返回值

async function Async() {
    console.log("hello world");
}
let result1 = Async();
console.log(result1);

在这里插入图片描述
从结果看来async函数返回的是promise对象,当时值是undefined。因此。在没有await的情况下,返回一个 promise 对象,并不会阻塞后面的语句。

但是await是在等待什么呢

function time(s) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function Async(value, s) {
  await time(s);
  console.log(value);
}
Async('hello world', 50);

指定 50 毫秒以后,输出hello world。

一般用await去等待async函数完成,await 等待的是一个表达式,表达式的计算结果是 promise 对象或其它值,因此,await后面实际可以接收普通函数调用或直接量。
如果await等到的不是promise对象,表达式运算结果就是它等到的东西。
如果是promise对象,await会阻塞后面的代码,等promise对象处理成功,得到的值为await表达式的运算结果。虽然await阻塞了,但await在async中,async不会阻塞,它内部所有的阻塞都被封装在一个promise对象中异步执行。

任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

async function Async() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}
let result1 = Async();
console.log(result1);

在这里插入图片描述
从结果看来,第二个await语句是不会执行的,因为第一个await语句状态变成了reject。

二、Async函数的错误处理

如果await后面的异步操作出错,那么async函数返回的 promise 对象被reject了。

let a;
async function f() {
    await Promise.reject('error');
    a = await 1; // await 没有执行
}
f().then(v => console.log(a));

从结果看来,当async函数中的await只要有一个出现reject状态,则后面的await都不会执行。一般解决办法用try…catch。

// 正确的写法
let a;
async function f() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error);
    }
    a = await 1;
    return a;
}

f().then(v => console.log(a)); // 1

从结果看来,这样就很好的解决了这个问题,当有多个await不会执行时,可以都放在try…catch中。

三、结论

async|await的优点:

  • async|await解决了回调地狱的问题
  • async|await支持并发执行
  • async|await对异步处理更加简洁
  • async|await可以在try…catch中捕获错误
### JavaScript 中 Async Await作用及其 Promise 的关系 #### 1. **Async Await 的基本概念** `async` `await` 是 JavaScript 提供的一种简化异步编程的方式,主要用于处理基于 Promise 的异步操作。通过使用这两个关键字,可以使异步代码看起来更像同步代码,从而提高可读性维护性。 - **`async`**: 这是一个函数声明前的关键字,表示该函数内部可能会包含异步操作,并且总是返回一个 Promise[^2]。 - **`await`**: 这是一个表达式前面的关键字,用于等待一个 Promise 的完成。只有在标记为 `async` 的函数中才能使用 `await` 表达式[^1]。 #### 2. **Await 处理 Promise 的机制** 当在一个 `async` 函数中遇到 `await` 表达式时,JavaScript 引擎会暂停该函数的执行,直到所等待的 Promise 被解决(即变为 fulfilled 或 rejected)。如果 Promise 成功解决,则其结果会被赋值给变量;如果被拒绝,则会抛出错误,可以通过 `try...catch` 来捕获这些错误[^3]。 ##### 示例代码 ```javascript // 定义一个返回 Promise 的函数 const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); }; // 使用 async/await 等待延迟结束 (async function run() { console.log('开始'); await delay(2000); // 等待 2 秒钟 console.log('经过了两秒钟'); })(); ``` 在此示例中,`delay` 函数创建了一个将在指定毫秒数后解析的 Promise。调用 `await delay(2000)` 导致程序暂停运行大约 2 秒钟,之后继续执行后续语句[^1]。 #### 3. **结合 Fetch API 的实际应用** 下面展示如何利用 `async` `await` 来从远程服务器获取 JSON 数据: ##### 示例代码 ```javascript async function fetchData(url) { try { const response = await fetch(url); // 发起网络请求 if (!response.ok) throw new Error(`HTTP 错误! 状态码: ${response.status}`); const data = await response.json(); // 将响应体转换为 JSON 格式 console.log(data); } catch (error) { console.error('数据获取失败:', error.message); } } fetchData('https://jsonplaceholder.typicode.com/posts/1'); ``` 这里展示了完整的流程:发起 HTTP 请求 -> 接收响应 -> 检查状态 -> 解析 JSON 数据。整个过程清晰明了,易于理解调试[^2]。 #### 4. **按顺序执行多个异步任务** 有时我们需要依次执行一系列相互依赖的任务。借助于 `async` `await`,我们可以轻松实现这一点而无需嵌套回调地狱。 ##### 示例代码 ```javascript // 定义几个模拟耗时工作的函数 function taskA(ms) { return new Promise(r => setTimeout(() => r('Task A Done'), ms)); } function taskB(ms) { return new Promise(r => setTimeout(() => r('Task B Done'), ms)); } function taskC(ms) { return new Promise(r => setTimeout(() => r('Task C Done'), ms)); } // 按序执行三个任务 (async function executeTasksSequentially() { console.log(await taskA(1000)); // Task A Done console.log(await taskB(2000)); // Task B Done console.log(await taskC(1500)); // Task C Done })(); ``` 这段代码确保每个任务都完全结束后才启动下一个任务,保持逻辑上的线性流动[^3]。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值