“.then JavaScript”：掌握异步编程的利器121

在现代JavaScript编程中，异步编程至关重要。它允许我们在不阻塞主线程的情况下执行长时间的任务，从而保持界面的响应性。而.then()方法是实现异步编程的强大工具，它可以在承诺（Promise）解决后执行回调函数。

简介

Promise是一个表示异步操作的最终结果（成功或失败）的对象。.then()方法允许我们为Promise添加一个回调函数，该回调函数将在Promise解决后执行。回调函数可以接收Promise解决时的值作为参数。

例如，我们有一个获取用户数据（例如姓名）的异步函数：```javascript
function getUserData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("John Doe");
}, 2000);
});
}
```

我们可以使用.then()方法在Promise解决后获取用户数据：```javascript
getUserData()
.then((data) => {
("User data:", data);
});
```

.then()语法

.then()方法的语法如下：```javascript
(onFulfilled, onRejected);
```
* `onFulfilled`：在Promise解决时执行的回调函数。该函数接收Promise解决时的值作为参数。
* `onRejected`：在Promise被拒绝时执行的回调函数（可选）。该函数接收Promise拒绝时的原因作为参数。

链式调用.then()

.then()方法可以链式调用，这意味着我们可以将多个.then()回调函数串联在一起。当一个Promise解决后，下一个回调函数将被执行，并接收前一个回调函数的返回值。例如：```javascript
getUserData()
.then((data) => {
return ();
})
.then((name) => {
("User name in uppercase:", name);
});
```

处理错误

如果Promise被拒绝，我们可以使用.catch()方法来处理错误。.catch()方法接收一个回调函数，该回调函数将在Promise被拒绝时执行，并接收拒绝的原因作为参数。例如：```javascript
getUserData()
.then((data) => {
("User data:", data);
})
.catch((error) => {
("Error:", error);
});
```

最佳实践* 使用异步/等待语法：ES2017引入了async/await语法，它为异步编程提供了更简洁和同步的语法。考虑使用async/await代替.then()回调。
* 避免过度嵌套：链式调用.then()可以创建难以理解的嵌套代码。使用async/await或将回调函数分解为单独的函数以保持代码可读性。
* 返回Promise：在.then()回调函数中，务必返回一个Promise。这将允许后续.then()回调函数链式调用。

.then()方法是掌握异步JavaScript编程的强大工具。它允许我们以可管理和可扩展的方式处理异步操作。通过了解.then()的语法、链式调用和最佳实践，我们可以有效地编写响应式和强大的JavaScript应用程序。

2024-12-22

上一篇：JavaScript 引入：将外部脚本加载到 HTML 文档中

下一篇：JavaScript 原型链