編輯：我在這里有一個演示
我想從 API 中獲取資料，將其添加到類的建構式中，然后單擊按鈕將其顯示到頁面。
class Entry {
constructor() {
this.pages = [];
}
loadAllEntries(url) {
fetch(url)
.then((response) => response.json())
.then((data) => {
this.pages = data;
// this would do it autuomatically, it's not what I want
//this.displayAllEntries("#notes-list");
});
}
displayAllEntries(node) {
let ul = document.createElement("ul");
ul.id = "display-list-note";
this.pages.map((page) => {
let li = document.createElement("li");
li.innerText = page.title;
ul.appendChild(this.createClickableItem(page));
});
document.querySelector(node).appendChild(ul);
}
createClickableItem(item) {
let li = document.createElement("li");
li.innerText = item.title;
li.addEventListener("click", () => {
console.log(item.id);
});
return li;
}
}
const courses = new Entry();
courses.loadAllEntries("http://localhost:1338/courses?favorite=true");
// on some click I want to run
courses.displayAllEntries("#notes-list");
但是，displayAllEntries表現得好像loadAllEntries從來沒有跑過！
稍后我想做一些類似的事情courses.deleteEntry(213)并改變建構式的內容，（一個美化的待辦事項串列型別的東西）
編輯：我在這里有一個演示
uj5u.com熱心網友回復：
可以解決此問題的最小觸摸如下：
- 從 fetch 中回傳promise
loadAllEntries(url) {
// just return, no further changes required
return fetch(url)
.then(...
- 在頂層，在 fetch 完成后繼續
then
const courses = new Entry();
const url = "http://localhost:1338/courses?favorite=true";
courses.loadAllEntries(url).then(() => {
courses.displayAllEntries("#notes-list");
});
如果底層方法有效，這將有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/461226.html
標籤：javascript 哎呀 javascript 对象