在Express.js中利用async/await高效处理Axios异步请求-js教程-PHP中文网

在Express.js中利用async/await高效处理Axios异步请求

碧海醫心

发布： 2025-10-22 10:59:04

原创

788人浏览过

在express.js中利用async/await高效处理axios异步请求

本文深入探讨在Express.js应用中，如何通过`async/await`语法正确处理Axios发起的异步HTTP请求，以避免获取到未解析的Promise对象。教程将详细演示如何改造异步工具函数和Express路由处理器，确保数据能够被正确地等待、捕获并返回，从而实现清晰、可维护的异步代码流。

理解JavaScript中的异步操作与Promise

在JavaScript中，网络请求（如使用Axios）是典型的异步操作。这意味着当您发起一个请求时，代码不会停下来等待响应，而是会继续执行后续代码。Axios默认返回一个Promise对象，该对象代表了异步操作的最终完成（或失败）及其结果值。当您在异步函数内部使用.then()链式调用来处理响应时，如果外部函数试图直接返回.then()内部的值，它实际上返回的是Promise对象本身，而不是Promise解析后的最终数据。这就是为什么在Express路由中直接打印异步工具函数的返回值时，会看到Promise { <pending> }或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 函数返回的数据。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

原始问题中的 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模板，以便在视图中渲染。