如何解决如何恢复显示 [[PromiseResult]]: undefined 的承诺值?
page-application
在 javascript
中,没有 framework
。我被这个返回未定义的承诺问题所困扰。我只是在 html 页面上未定义。
我在两个函数 getJsonData
和 showPhotographers
之间传递变量时遇到了很多麻烦。
let json;
// get Json Data
const getJsonData = () => {
return fetch('../../db/FisheyeData.json').then((response) => {
return response
.json()
.then((data) => {
json = data;
return data;
})
.catch((err) => {
console.log(err);
});
});
};
// get Photographers
const getPhotographers = () => {
return new Promise((resolve,reject) => {
getJsonData().then((data) => {
console.log(data);
return resolve(data.photographers);
});
});
};
// share scope json
if(1 == 1) {
json = getJsonData();
}
const showPhotographers = () => {
// get the values
if (json !== undefined) {
// load the images
// function html Photographers section
console.log(json);
const html = JSON.stringify(json)
.photographers?.map((user) => {
const str = user.name;
const dash = str.replace(" ","-");
console.log(dash);
return `
<div class="user ">
<a href="#${dash}">
<div class="circle thumb">
<div class="crop">
<img src="img/${user.portrait}" alt="" />
</div>
<h2 class="name">${user.name}</h2>
</div>
</a>
<p class="city">${user.city}</p>
<p class="tagline">${user.tagline}</p>
<p class="price">${user.price} €/jour</p>
<ul class="tags">
${user.tags
.map((tag) =>
`
<li>
<a href="#" class="${tag}">#${tag}</a>
</li>
`.trim()
)
.join("")}
</ul>
</div>
`;
})
.join("");
document.querySelector("#app").insertAdjacentHTML("afterbegin",html);
}
}
export { json,getJsonData,getPhotographers,showPhotographers };
{
"photographers":[
{
"name":"Mimi Keel","id":243,"city":"London","country":"UK","tags":[
"portrait","events","travel","animals"
],"tagline":"Voir le beau dans le quotidien","price":400,"portrait":"MimiKeel.jpg"
}
]
解决方法
你把事情复杂化了。 fetch
返回一个 promise,因此您可以在 getPhotographers
中使用它的结果。在这个例子中,我在两秒后从一个 fakeAPI 调用返回了一些数据,并记录了摄影师的名字。
const data={photographers:[{name:"Mimi Keel",id:243,city:"London",country:"UK",tags:["portrait","events","travel","animals"],tagline:"Voir le beau dans le quotidien",price:400,portrait:"MimiKeel.jpg"}]};
function fakeAPI() {
return new Promise(res => {
setTimeout(() => res(data),2000);
});
}
function getJsonData() {
return fakeAPI();
};
function getPhotographers() {
return new Promise(res => {
getJsonData().then(data => {
res(data.photographers);
});
});
};
function showPhotographers() {
getPhotographers()
.then(data => {
data.map(photographer => {
console.log(photographer.name);
});
});
}
showPhotographers();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。