时间戳

首页 > 解决方案 > Node.js：将 JSON API 数据呈现为对服务器的 HTML 响应

node.js - Node.js：将 JSON API 数据呈现为对服务器的 HTML 响应

问题描述

无法弄清楚这一点，任何帮助表示赞赏。我正在读取 JSON 数据并将其解析为 HTML 并将其输出到 nodejs httpserver。这工作正常。

但我想使用 Axios 从 API 读取数据。似乎不起作用。它使整个 httpserver 崩溃。

下面的代码片段：

var axios = require("axios");
var http = require("http");
var fs = require("fs");

//Fetch the API data
function getData() {
  const promise = axios
    .get("http://www.omdbapi.com/?s=star+wars&apikey=cbbc6750")
    .then(res => {
      const data = response.data;
      console.log(data);
      return data;
    })
    .catch(error => {
      console.warn("Error while getting data!");
    });
}
// Run through the data
function parse(data) {
  console.log("Parse");
  var html = "<table border='1'>";
  for (var i = 0; i < 10; i++) {
    html += "<tr>";
    html += "<td>" + data.Search[i].Title + "</td>";
    html += "<td>" + data.Search[i].Type + "</td>";
    html += "</tr>";
  }
  html += "</table>";
  console.log(html);
  return html;
}

// create a server object:
http
  .createServer(function(request, response) {
    response.writeHead(200, { "Content-Type": "text/html" });

 // This works perfectly when Im loading the data from a file   
 //  var data = require("./starwars.json");
// it doesnt with axios
    var data = getData();
    var html = parse(data);
    response.write(html);
    console.log(data);

    response.end(); //end the response
  })
  .listen(8081); //the server object listens on port 8080
// Loop though the data

标签： node.js

解决方案

这是一个最小的，未优化的版本。试试看。您当然需要该parse功能并需要您的依赖项。

const server = http.createServer(function (request, respose) {
  axios
    .get("http://www.omdbapi.com/?s=star+wars&apikey=cbbc6750")
    .then(res => {
       const body = parse(res.data)
       response.writeHead(200, { 'content-type': 'text/html' })
       response.end(body)
    })
    .catch(err => {
       // Handle error if axios fetching fails
       response.writeHead(500, { 'content-type': 'text/plain' })
       response.end('Internal Server Error')
     })
})

server.listen(port, err => {
  if (err) throw err
  console.log(`Server listens on  ${server.address().host}:${server.address().port}`)
})

至于优化，我建议通读节点 http和节点流文档。基本的节点方式是这样的：

  1. 安装 axios 使用http.get

  2. 使用转换流代替同步解析函数

  3. 将它们与http ServerResponse（来自 http.createServer 的回调的响应）一起通过管道传输

推荐阅读