我在做什么：
我正在為我制作一個作品集，使用純 HTML、CSS 和 JavaScript。我正在創建專案頁面并嘗試<p>使用 JavaScript創建一個并從 .json 檔案插入資料，但是：
有什么問題？
Fetch API 不適用于 addEventListener。
我曾試過：
創建第<p>一個進出的addEventListener函式插入資料，也行不通。
JavaScript 的一部分：
async setProjects(){
let response = await fetch("contents/projects.json");
let responseJson = await response.json();
document.addEventListener("DOMContentLoaded", function () {
var p = document.createElement('p');
p.innerHTML = responseJson.one.bio;
p.id = "bio-project";
// p.style.cssText = 'border-left: 8px solid aqua;';
document.querySelector(".projeto-contents").appendChild(p);
}, false)
}
HTML：
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projetos - Vitor Hugo's Portifolio</title>
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<nav>
<a class="logo" href="/">Vitor Hugo</a>
<div class="mobile-menu">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="projetos.html">Projetos</a></li>
<li><a href="contatos.html">Contato</a></li>
</ul>
</nav>
</header>
<script src="../mobile-screen.js"></script>
<!-- -->
<div class="projetos">
<div class="projeto-contents">
<h1 id="titulo-project">test</h1>
</div>
</div>
<script language="javascript">
const portifolio = new Portifolio();
portifolio.setProjects();
</script>
</body>
</html>
JSON：
{
"one":{
"name":"Lorem",
"bio":"Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos dolore pariatur accusamus quaerat hic distinctio, cum, ratione dignissimos, doloremque incidunt provident deleniti consectetur qui alias quam quod porro error temporibus.",
"language":"Python"
},
"two":{
"name":"testname2",
"bio":"testbio2",
"language":"testlanguage2"
},
"three":{
"name":"testname3",
"bio":"testbio3",
"language":"testlanguage3"
},
"four":{
"name":"testname4",
"bio":"testbio4",
"language":"testlanguage4"
}
}
專案鏈接：https : //github.com/vitorhugo1207/portfolio
我必須做什么？請幫我。還有一件事：關于json是否可以使用數字作為索引？對于我正在學習英語的任何拼寫和語法錯誤，我深表歉意。
uj5u.com熱心網友回復：
async/await 允許您撰寫看起來是同步的代碼，但實際上并非如此——它只是用于處理 Promise 的語法糖。
后fetch()發送AJAX請求時，瀏覽器將繼續加載檔案。到它完成時，DOM 已經加載并且DOMContentLoaded事件已經觸發，因此為它添加事件偵聽器為時已晚。
您可以從偵聽器中獲取承諾fetch()并使用其.then()方法DOMContentLoaded。
setProjects() {
let response_promise = fetch("contents/projects.json");
document.addEventListener("DOMContentLoaded", function() {
response_promise.then(response => response.json().then(responseJson => {
var p = document.createElement('p');
p.innerHTML = responseJson.one.bio;
p.id = "bio-project";
// p.style.cssText = 'border-left: 8px solid aqua;';
document.querySelector(".projeto-contents").appendChild(p);
}))
}, false)
}uj5u.com熱心網友回復：
document.addEventListener("DOMContentLoaded", async () => {
const response = await fetch("contents/projects.json").then((res) => res.json());
const paragraph = document.createElement("p");
paragraph.innerHTML = response.one.bio;
paragraph.id = "bio-project";
// p.style.cssText = 'border-left: 8px solid aqua;';
document.querySelector(".projeto-contents").appendChild(paragraph);
});<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projetos - Vitor Hugo's Portifolio</title>
<link rel="stylesheet" href="../style.css" />
<script defer src="./index.js"></script>
</head>
<body>
<header>
<nav>
<a class="logo" href="/">Vitor Hugo</a>
<div class="mobile-menu">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="projetos.html">Projetos</a></li>
<li><a href="contatos.html">Contato</a></li>
</ul>
</nav>
</header>
<div class="projetos">
<div class="projeto-contents">
<h1 id="titulo-project">test</h1>
</div>
</div>
</body>
</html>在 DOM 已經呈現到您的頁面之后，您正在觸發 DOMContentLoaded。同樣在您的 HTML 中，您使用的是不帶defer屬性的。基本上defer是告訴瀏覽器script在決議檔案后執行它，或者您可以將它附加到 body <script src="./index.js"></script>。
此外，我正在使用 Promise API，如果您想了解更多有關它的資訊，請查看PromiseAPI或有關async/await
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403315.html
標籤：
上一篇：如何從身體背景影像周圍洗掉空白？