如何在 Node.js 中进一步执行我们的代码之前等待 HTTP 请求

Question

我正在尝试向 API 发出 GET 请求，并希望将它返回的数据存储在另一个变量中，但 Javascript 不会等待请求完成并将我的变量记录为 Undefined

app.get("/", function (req, res) {
    const url = "https://animechan.vercel.app/api/random";
    let str = "";
    let quote;
    
    https.get(url,(resposne)=>{
        resposne.on("data",(data)=>{
            str+=data;
        });
        resposne.on("end",()=>{
            const info=JSON.parse(str);
            quote=info.quote;
        });
    });

    console.log(quote);
    res.render("header", {
        quote: quote
    });
});

如果有人能告诉我如何解决这个问题，我会很高兴，因为我是 javascript 的初学者，我在哪里可以更多地研究它。

Answer 1

快速回答是您需要将该代码放在response.on('end')回调中。

resposne.on("end",()=>{
   const info=JSON.parse(str);
   quote=info.quote;
   // now we can use res.render
   console.log(quote);
   res.render("header", {
      quote: quote
   });
});

但是，遵循这种方法将导致项目的回调地狱、不可读和不可扩展的代码。 理想情况下，您应该开始使用promises 。 Promises 是 javascript 的重要组成部分，是开发人员必须具备的知识。

另外，我想指出您不需要从头开始实现 http 调用功能或尝试将此类代码包装到 promise 中。 相反，最好使用fetch api（如果您使用的是 node 版本 18 或更高版本）或使用相应的库，例如node-fetch 。

Answer 2

您在这里要做的就是在 HTTP 调用完成后调用 res.send

app.get("/", function (req, res) {
    const url = "https://animechan.vercel.app/api/random";
    let str = "";
    let quote;
    
    https.get(url,(resposne)=>{
        resposne.on("data",(data)=>{
            str+=data;
        });
        resposne.on("end",()=>{
            const info=JSON.parse(str);
            quote=info.quote;

            // Send response _after_ the http call is complete
            console.log(quote);
            res.render("header", {
                quote: quote
            });
        });
    });
});

我建议使用节点的获取，因为默认的 HTTP 客户端不太符合人体工程学

获取 API 参考： https ://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Node.js API 参考： https ://nodejs.org/dist/latest-v18.x/docs/api/globals.html#fetch