如何恢复显示 [[PromiseResult]]: undefined 的承诺值?

page-applicationjavascript 中,没有 framework。我被这个返回未定义的承诺问题所困扰。我只是在 html 页面上未定义。 我在两个函数 getJsonDatashowPhotographers 之间传递变量时遇到了很多麻烦。

  1. 为此,我使用了块 if(1 ==1) 内的变量定义并定义了 json = getJsonData();就像这样,变量定义得很好。 如果您有此问题的解决方案,请提前致谢 这是我的代码:
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 };

文件 FishEyeData.json 看起来像这样

{
  "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"
     }
]
zyp0374 回答:如何恢复显示 [[PromiseResult]]: undefined 的承诺值?

你把事情复杂化了。 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();

本文链接:https://www.f2er.com/260.html

大家都在问