javascript - 如何恢复显示 [[PromiseResult]]: undefined 的承诺的价值？

Question

page-application在javascript没有framework。我被这个返回未定义的承诺问题所困扰。我只是在 html 页面上未定义。在两个函数getJsonData和showPhotographers.

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"
     }
]

Answer 1

你把事情复杂化了。fetch返回一个承诺，因此您可以在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();