如何在 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