如何减少JavaScript中.then的使用？
在JavaScript中，.then通常与Promise一起使用，用于处理异步操作的结果。然而，过多的.then链可能会导致代码难以阅读和维护。以下是一些减少.then使用的方法：
1. 使用 async/await
async/await是ES2017引入的语法，它允许你以同步的方式编写异步代码，从而避免回调地狱。
示例代码：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();参考链接：
2. 使用 Promise.all
如果你有多个并行的异步操作，可以使用Promise.all来同时处理它们，而不是链式调用多个.then。
示例代码：
function fetchUserData(userId) {
return fetch(`https://api.example.com/user/${userId}`).then(response => response.json());
}
function fetchUserPosts(userId) {
return fetch(`https://api.example.com/user/${userId}/posts`).then(response => response.json());
}
async function fetchAllData(userId) {
try {
const [userData, userPosts] = await Promise.all([
fetchUserData(userId),
fetchUserPosts(userId)
]);
console.log('User Data:', userData);
console.log('User Posts:', userPosts);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchAllData(123);参考链接：
3. 使用 Promise.race
如果你有多个异步操作，但只需要最快返回的结果，可以使用Promise.race。
示例代码：
function fetchFastestData() {
const promise1 = fetch('https://api.example.com/fast1').then(response => response.json());
const promise2 = fetch('https://api.example.com/fast2').then(response => response.json());
return Promise.race([promise1, promise2]);
}
async function fetchData() {
try {
const data = await fetchFastestData();
console.log('Fastest Data:', data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();参考链接：
4. 使用 Promise.allSettled
如果你需要处理多个异步操作，但不关心它们是否成功，可以使用Promise.allSettled。
示例代码：
function fetchUserData(userId) {
return fetch(`https://api.example.com/user/${userId}`).then(response => response.json());
}
function fetchUserPosts(userId) {
return fetch(`https://api.example.com/user/${userId}/posts`).then(response => response.json());
}
async function fetchAllData(userId) {
try {
const results = await Promise.allSettled([
fetchUserData(userId),
fetchUserPosts(userId)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Data:', result.value);
} else {
console.error('Error:', result.reason);
}
});
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchAllData(123);参考链接：
通过这些方法，你可以减少.then的使用，使代码更加简洁和易读。
相关·内容
首先，很抱歉打字错误，葡萄牙语是我的主要语言，但我正在努力。 我正在创建一个计时器，它每500ms更新一次，并检查数字是否是30的倍数，这是一个测试代码，目前只有这个功能。问题是我使用了太多的.then，代码变得难以辨认。break; });} 我想知道是否有任何方法可以离开小函数，例如，一个获取数据，一个读取并理解数据，另一个检查它是否是30的倍数我尝试过的所有方法，要么不是每隔500ms更新一次，要么就是不起
浏览 58提问于2020-07-28得票数 0
回答已采纳
如何使用reduce()在以下数组中计算所有时间的总和(以字符串格式表示)？45", "02:33"]我在想，我需要split(":"), parseInt()和一些更多的计算，或者有更简单的方法来做到这一点？
浏览 5提问于2022-02-08得票数 1
我想知道在下面的例子中可以使用哪些js函数来获得一些数组值。 amount: '269.85' }];
我认为我们可以使用通常的循环，条件等，但是有什么方便的方法来解决这个问题吗？
浏览 3提问于2022-10-19得票数 1
我正在使用下面的函数，我必须添加一些IFs，以防字符串比REGEX组期望的格式短： function getFormatedCPF(unformatedValue) {} 有没有办法去掉IFs，只用正则表达式就能得到相同的输出我正在寻找类似于: complete: 999.999.999-99 partial
浏览 10提问于2021-09-23得票数 1
回答已采纳
2回答
在我的项目中，我想在html中淡入divs，并且我使用以下代码$(document).ready(function() { <div class="hideme">Fade In</div></div>它可以在这个项目的
浏览 2提问于2015-12-31得票数 13
1回答
我想要展示一个计时器，它可以减少每一秒的时间，并为圆圈添加动画。所以圆圈中的数字每秒都会减少，圆圈也会同时减少。我所说的圆将减少的意思是，基于计时器值，圆的一部分将消失/剪切。因此，在下图中，蓝色条将每秒减少一次。<code>B0</code>我的代码：<em
浏览 29提问于2019-08-24得票数 1
回答已采纳
我计划在本地编写一些代码，用于在javascript中加密文件。对于大文件和大密钥大小，CPU使用率(自然)相当高。在单个脚本设计中，这通常会挂起浏览器，直到任务完成。为了提高响应能力，同时允许用户做其他事情，我想尝试让脚本对用户的PC“更友好”。加密过程将以二进制字符串的形式读取文件，然后以块的形式对字符串进行加密(类似于1KB/块-需要测试)。我想尝试和用户HTML5 5为基础的工人，使整个事情尽可能增量。类似于：
产卵工作者发送给工作人员二进制数据块 w
浏览 0提问于2011-07-27得票数 4
回答已采纳
我如何在Javascript中增加和减少变量直到100，当达到100时，它应该开始减少。我在一个非常简单的JS游戏中使用了这个值，该值用于增加和减少PowerBar。
浏览 0提问于2011-03-31得票数 5
回答已采纳
1回答
我有一个脚本，它在async.js循环中使用"let“存储大约10个简单变量(意味着数据不会真正增长)，以及每个循环的日志到控制台。在每1-3秒循环一次的一分钟内(取决于页面加载速度)，几乎使用了1 GB的RAM……而且数量一直增长到崩溃的程度。我试着清除控制台以减少内存使用率，但它根本没有丢弃它，所以现在我不确定什么可能是问题所在。
浏览 1提问于2017-11-12得票数 0
如何判断一个javascript是否已经被其他html文件加载？我想减少javascript文件的冗余加载，以减少网页的加载时间。
浏览 0提问于2009-01-08得票数 2
我希望减少JavaScript语法中的重复。不管是用于循环还是任何语法！我添加了一些案例和结果 // case 1
// const min = [1, 31
浏览 4提问于2022-03-29得票数 1
回答已采纳
如何使forEach部分变得更干净更好？我会做更多的call_Funtions()sentences.all.forEach((s, i) => {}); push_first: [], push_third: []}
move_to.push(s)
delete sentenc
浏览 2提问于2017-09-17得票数 1
回答已采纳
1回答
我有ASP.NET代码，它使用作为视图。我做了一些重复的代码，因为我有3个表(在本例中)，我有相同的列。只是我从控制器那里得到的数据(Json)。这是JS代码 if (!order: [0, 'desc'], }
浏览 5提问于2021-12-22得票数 0
回答已采纳
如何在JavaScript中减少这个if语句
if(obj.attributes && obj.attributes.email === 'test@test.com') { ... }
浏览 22提问于2018-10-26得票数 1
回答已采纳
1回答
我有一个下拉菜单使用HTML和CSS。目前，它是简单和工作，但根据我的要求，我希望我的下拉类似于这个图像.请参阅.上的示例图像这是我的HTML。</li>
浏览 0提问于2014-05-22得票数 0
回答已采纳
4回答
我的任务是弄清楚如何将JavaScript和CSS打包到每个文件中。我们有一个java应用程序，如果这有任何区别的话，我们使用JQuery。我们使用ant来编写构建脚本，所以轻松地与Ant集成会更好。我们希望这样做可以减少缓存问题，并减少对servlet的请求数量。
浏览 3提问于2011-06-08得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
