本文深入探讨在Express.js应用中，如何通过`async/await`语法正确处理Axios发起的异步HTTP请求，以避免获取到未解析的Promise对象。教程将详细演示如何改造异步工具函数和Express路由处理器，确保数据能够被正确地等待、捕获并返回，从而实现清晰、可维护的异步代码流。
理解JavaScript中的异步操作与Promise
在JavaScript中，网络请求（如使用Axios）是典型的异步操作。这意味着当您发起一个请求时，代码不会停下来等待响应，而是会继续执行后续代码。Axios默认返回一个Promise对象，该对象代表了异步操作的最终完成（或失败）及其结果值。当您在异步函数内部使用.then()链式调用来处理响应时，如果外部函数试图直接返回.then()内部的值，它实际上返回的是Promise对象本身，而不是Promise解析后的最终数据。这就是为什么在Express路由中直接打印异步工具函数的返回值时，会看到Promise { }或Promise { undefined }的原因。
解决方案：拥抱async/await
ES2017引入的async/await语法提供了一种更简洁、更同步的方式来编写和理解异步代码，它建立在Promise之上。通过将函数标记为async，您可以在其中使用await关键字来“暂停”函数的执行，直到一个Promise被解决（或拒绝）。
1. 改造异步数据获取工具函数
首先，我们需要修改负责发起Axios请求的工具函数。将该函数声明为async，并在Axios请求前使用await关键字。同时，为了健壮性，引入try…catch块来处理可能发生的网络错误或API错误。
原始问题中的 utils/axios.js 示例：
// utils/axios.js (原始问题代码片段)const axios = require('axios');loadDataPesan = async function(opts){ axios.get('localhost/getData', { params: { opt: opts, nis: "123123", } }) .then(function (response) { console.log(response.data.datas) // ITS NORMALLY SHOW THE CORRECT DATA return response.data.datas; // HERE MY PROBLEM, WHEN I RETURN IT DATA always Promise { } }) .catch(function (error) { return error; });}module.exports = { loadDataPesan };
使用 async/await 优化后的 utils/axios.js：
// utils/axios.js (优化后)const axios = require('axios');const loadDataPesan = async function(opts, nisParam) { // 接收nis参数，使其更灵活 try { const response = await axios.get('http://localhost/getData', { // 建议使用http://或https://明确协议 params: { opt: opts, nis: nisParam, // 使用传入的nis参数 } }); console.log("从API获取的数据:", response.data.datas); // 打印获取到的实际数据 return response.data.datas; // 返回解析后的数据 } catch (error) { console.error("数据获取失败:", error.message); // 打印错误信息 throw error; // 抛出错误，以便调用者可以捕获并处理 }};module.exports = { loadDataPesan };
关键改进点：
函数声明为 async。axios.get() 调用前使用 await，这使得代码在等待HTTP响应时暂停执行，直到Promise解决。使用 try…catch 块捕获潜在的错误。在 catch 块中，我们选择 throw error，这使得调用 loadDataPesan 的函数也能捕获到这个错误，进行统一处理。直接 return response.data.datas，此时 response.data.datas 已经是实际的数据，而不是Promise。
2. 在Express路由中等待异步结果
接下来，我们需要修改Express路由处理函数，使其也能够正确地等待 loadDataPesan 函数返回的数据。
原始问题中的 app.js 示例：
// app.js (原始问题代码片段)const express = require('express');const expressLayout = require('express-ejs-layouts');const { loadContact } = require('./utils/contact');const { loadDataPesan } = require('./utils/axios');const app = express();const port = 8899;app.set('view engine', 'ejs');app.use(expressLayout);app.use(express.static('public'));app.get('/contact', (req, res) => { const contacts = loadContact(); const dataaxio = loadDataPesan("SUBS","912830123"); // 问题所在：这里没有await console.log(dataaxio); // **HERE MY PROBLEM RESPONSE ALWAYS Promise { }** res.render('contact', { layout: 'layouts/main-layout', title: 'Halaman Contact', contact:contacts, });})
使用 async/await 优化后的 app.js：
// app.js (优化后)const express = require('express');const expressLayout = require('express-ejs-layouts');const { loadContact } = require('./utils/contact');const { loadDataPesan } = require('./utils/axios'); // 导入优化后的函数const app = express();const port = 8899;app.set('view engine', 'ejs');app.use(expressLayout);app.use(express.static('public'));app.get('/contact', async (req, res) => { // 将路由处理函数声明为 async try { const contacts = loadContact(); // 假设这是一个同步函数 // 使用 await 等待 loadDataPesan 返回实际数据 const dataaxio = await loadDataPesan("SUBS", "912830123"); console.log("在Express路由中获取到的数据:", dataaxio); // 现在会打印实际数据 res.render('contact', { layout: 'layouts/main-layout', title: 'Halaman Contact', contact: contacts, apiData: dataaxio, // 将获取到的数据传递给模板 }); } catch (error) { console.error("处理/contact路由时发生错误:", error.message); res.status(500).send("服务器内部错误，无法加载联系人数据。"); // 错误处理 }});app.listen(port, () => { console.log(`Server running at http://localhost:${port}`);});
关键改进点：
Express路由处理函数（即回调函数）声明为 async。调用 loadDataPesan 时，在其前面加上 await 关键字。这样，dataaxio 变量将接收到 loadDataPesan 成功解析后返回的实际数据，而不是一个Promise对象。整个路由逻辑包裹在 try…catch 块中，以便捕获 loadDataPesan 抛出的任何错误，并向客户端返回一个友好的错误响应。将 apiData 传递给EJS模板，以便在视图中渲染。
总结与注意事项
通过上述改造，我们成功地解决了在Express.js中Axios返回Promise对象的问题，确保了异步数据的正确获取和处理。
核心要点：
异步函数必须声明为 async。在 async 函数内部，对返回Promise的调用使用 await。始终使用 try…catch 块来处理 async/await 操作中的潜在错误。 这对于健壮的应用程序至关重要。理解Promise的本质。 async/await 只是Promise的语法糖，其底层机制仍然是Promise。
遵循这些原则，您将能够更有效地管理Express.js应用中的异步流程，编写出更清晰、更易于维护的代码。
以上就是在Express.js中利用async/await高效处理Axios异步请求的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531595.html
微信扫一扫 
支付宝扫一扫 
