如何恢复显示 [[PromiseResult]]: undefined 的 promise 的值？

Question

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

之间传递变量时遇到了很多麻烦

为此，我使用了块内的变量定义 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 return 是一个承诺，因此您可以在 getPhotographers 中使用它的结果。在此示例中，我 return 两秒后来自 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();

如何恢复显示 [[PromiseResult]]: undefined 的 promise 的值？

How to recover the value of a promise that displays [[PromiseResult]]: undefined?

javascript

return

undefined

no-framework

es6-promise