本文深入探讨在Express.js应用中，如何通过`async/await`语法正确处理Axios发起的异步HTTP请求，以避免获取到未解析的Promise对象。教程将详细演示如何改造异步工具函数和Express路由处理器，确保数据能够被正确地等待、捕获并返回，从而实现清晰、可维护的异步代码流。
理解JavaScript中的异步操作与Promise
在JavaScript中，网络请求（如使用Axios）是典型的异步操作。这意味着当您发起一个请求时，代码不会停下来等待响应，而是会继续执行后续代码。Axios默认返回一个Promise对象，该对象代表了异步操作的最终完成（或失败）及其结果值。当您在异步函数内部使用.then()链式调用来处理响应时，如果外部函数试图直接返回.then()内部的值，它实际上返回的是Promise对象本身，而不是Promise解析后的最终数据。这就是为什么在Express路由中直接打印异步工具函数的返回值时，会看到Promise {
解决方案：拥抱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应用中的异步流程，编写出更清晰、更易于维护的代码。
