我有一个询问 API 的迷你项目“https://hacker-news.firebaseio.com/v0/newstories.json”
向我发送一个包含最近 500 个 id 消息的对象。然后我使用这个 ID 询问 API“https://hacker-news.firebaseio.com/v0/item+ID+.json”，它向我发送一个新闻的详细信息。
我必须管理 Axios。 该文件有效，但将每个结果/控制台日志发送两次？ 谢谢大家的支持
main.js
import createGeneralElement from "./createElement.js";
const API_500_NEWS = "https://hacker-news.firebaseio.com/v0/newstories.json"; // define API_500 const
const API_ONE_NEWS = "https://hacker-news.firebaseio.com/v0/item/"; // define fix part of One news Api const
//let array_id_news = []; //
let actual_index = 0; // inizalmente ho l'indice di notize "date" a 0
let news_per_page = 2; // come da richiesta verranno visualizzate 10 news alla volta
//var _ = require("lodash"); // import lodash
///// test axios //////////////////////////////////////
import axios, { isCancel, AxiosError } from "axios"; // import axios
import "../scss/main.scss"; // import scss for webpack
function createUrl(index) {
let NewUrl = `${API_ONE_NEWS + index + ".json"}`;
return NewUrl; // No promise - normal function
}
function getOneNews(index) {
return axios.get(createUrl(index)); // promise
}
function getData() {
return axios.get(API_500_NEWS); // promise
}
async function getXnewsPerPage(array_id_news) {
//array_id_news = await genArray500();
for (let i = actual_index; i < actual_index + news_per_page; i++) {
let newsX = await getOneNews(array_id_news[i]);
console.log("i :", i);
console.log(i, "newsX :", newsX.data);
}
actual_index = news_per_page + actual_index;
console.log("actual index ***************************:", actual_index);
}
window.addEventListener("DOMContentLoaded", () => {
getData().then((res) => {
console.log("test res.data :", res.data);
getXnewsPerPage(res.data);
createGeneralElement("header", "my-header", "prova header"); // function createGeneralElement(tagHtml, className, content)
});
});
createElement.js
const body = document.body;
// Function for create general elements
export default function createGeneralElement(tagHtml, className, content) {
const newElement = document.createElement(tagHtml);
newElement.innerHTML = content;
newElement.classList.add(className);
newElement.setAttribute("id", className);
body.appendChild(newElement);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="turbolinks-cache-control" content="no-preview" />
<title>npm webpack 2</title>
<!-- questo e' il file TEMPLATE html -->
<link rel="shortcut icon" type="image/x-ic n" href="src/img/images.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="index.js"></script>
</head>
<body>
ciao
</body>
</html>
main.scs
body{
background-color: greenyellow;
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: "./src/js/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
clean: true,
},
devServer: {
open: true,
},
plugins: [
new HtmlWebpackPlugin({
favicon: "src/img/images.ico",
filename: "index.html", // in alcuna documentazione e' filename
title: "test",
template: "src/HTML/index.html",
}),
],
mode: "none",
module: {
rules: [
{
test: /\.scss?$/,
use: ["style-loader", "css-loader", "sass-loader"], // prima intsallare con npm sia css che sass
//npm install --save-dev style-loader css-loader
//npm install --save-dev sass sass-loader
// prima carica scss-order poi css-loader poi style-loader
exclude: /node-modules/,
},
// test html-loader va qui se installato ma sembra non necessario forse fa le stesse cose
],
},
};
module.exports = config;