Promise 中的 then 和 async/await
时间: 2024-06-01 17:10:11 浏览: 9
Promise 中的 then 和 async/await 都是用来处理异步操作的方式。
then 是 Promise 实例的方法,可以在 Promise 对象 fulfilled(已完成)或 rejected(已拒绝)后执行回调函数。then 方法接受两个参数:onFulfilled 和 onRejected,分别是在 Promise 对象 fulfilled 和 rejected 后执行的回调函数。then 方法返回一个新的 Promise 对象,可以链式调用。
async/await 是 ES2017 引入的语法糖,使异步操作更加的简洁和优雅。async 函数返回一个 Promise 对象,可以使用 await 关键字等待异步操作的结果。await 关键字只能在 async 函数内部使用,等待一个返回 Promise 对象的异步操作完成,并返回异步操作的结果。如果 await 后面的异步操作抛出异常,则整个 async 函数会抛出异常,并被 catch 语句捕获。
在使用上,async/await 更加易于理解和编写,但是需要注意错误处理;而 then 方法更加灵活,可以处理更多的情况,但是链式调用可能会让代码难以阅读。
相关问题
promise和async/await的区别
promise和async/await都是用于处理异步操作的方式,但它们在语法和使用上有一些区别。
1. Promise:Promise是ES6引入的一种处理异步操作的方式。它是一个对象,表示一个异步操作的最终完成(或失败)及其结果的值。Promise提供了一个链式的调用方式,可以通过then()方法来处理异步操作的结果,也可以通过catch()方法来处理异常情况。
2. async/await:async/await是ES8引入的一种处理异步操作的方式。它是基于Promise的语法糖,使得异步代码看起来更像同步代码。使用async关键字声明一个函数为异步函数,然后在需要等待异步操作结果的地方使用await关键字来等待Promise对象的完成。
区别:
- 语法简洁性:async/await相对于Promise更加简洁,更接近于同步代码的写法,使得代码更易读、易理解。
- 错误处理:使用Promise时需要通过catch()方法来捕获异常,而async/await可以使用try/catch语句来处理异常,使得错误处理更加直观。
- 链式调用:Promise通过链式调用的方式来处理多个异步操作,而async/await可以使用同步的方式编写多个异步操作,使得逻辑更加清晰。
- 可读性:async/await相对于Promise更加易于理解和阅读,特别是对于有较多异步操作的代码块。
需要注意的是,async/await是基于Promise的,实际上async函数会返回一个Promise对象。在使用async/await时,可以将任何返回Promise对象的异步操作转化为同步的写法,但在某些情况下可能会导致阻塞。
Promise 和 async/await执行顺序
`Promise` 和 `async/await` 的执行顺序都基于 JavaScript 事件循环机制。
在 `Promise` 中,异步操作会被添加到事件队列中,然后按照队列中的顺序执行。在执行过程中,如果遇到了异步操作,就会将其添加到事件队列中等待执行。当所有的同步任务执行完毕后,才会开始执行异步任务。
在 `async/await` 中,异步操作会被转化成一个 `Promise` 对象,并使用 `await` 等待异步操作的结果。在执行过程中,如果遇到了 `await`,JavaScript 引擎会暂停当前的异步操作,并等待 `Promise` 对象的状态变为 `resolved` 或 `rejected`,然后再继续执行后面的代码。
下面是一个简单的例子,演示了 `Promise` 和 `async/await` 的执行顺序:
```
// 使用 Promise
console.log('start');
new Promise((resolve, reject) => {
console.log('Promise1');
resolve();
})
.then(() => {
console.log('Promise2');
});
console.log('end');
// 使用 async/await
async function asyncFunc() {
console.log('start');
await new Promise((resolve, reject) => {
console.log('Promise1');
resolve();
});
console.log('Promise2');
console.log('end');
}
asyncFunc();
```
在 `Promise` 中,首先输出了一个 `start`,然后创建了一个 `Promise` 对象并添加到事件队列中,接着输出了一个 `end`,最后在异步任务执行完毕后输出了 `Promise2`。
在 `async/await` 中,首先输出了一个 `start`,然后创建了一个 `Promise` 对象并使用 `await` 等待其执行结果,接着输出了一个 `Promise2` 和一个 `end`。
因此,最终的输出结果分别是:
```
// Promise
start
Promise1
end
Promise2
// async/await
start
Promise1
Promise2
end
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)