javascript - 为什么我在 javascript 中获取用户名时遇到问题？

Question

我正在开发 Javascript、HTML 和 CSS 项目。我想要的是使用其 Id 获取用户的名称。我使用 fetch 来做到这一点，但我遇到了一些问题。

function getUserName(userId) {
  let userTemp = window.API_HOST + '/users/' + userId;
  return fetch(userTemp, {
    headers: { authorization: localStorage.access_token },
  })
    .then(response => response.json())
    .then(response => {
      console.log('El nombre es: ' + response.name);
      return response.name;
    });
}

这里的问题是 response.name 是一个 promise 对象而不是实际名称。我尝试使用 stringify 但它没有用。有什么建议吗？

编辑: 我需要在这样的地方调用该函数:

function showOffer(newOffer) {
  if (newOffer.user_id === JSON.parse(localStorage.current_user)._id) {
    const wrapper = document.createElement('div');
    wrapper.className = 'wrap';
    const prodHolder = document.getElementById('demo').appendChild(wrapper);

    const offerBidderId = document.createElement('p');
    const offerBidderIdText = document.createTextNode(
      'Bidder id: ' + getUserName(newOffer.bidder_id),
    );
    console.log('New offer bidder id ' + newOffer.bidder_id);
    offerBidderId.appendChild(offerBidderIdText);
    wrapper.appendChild(offerBidderId);
    ....
}

也许问题出在这里？

Answer 1

fetch 总是返回一个 Promise。所以你必须用 then 或 async/await 来处理它。

您可以像这样访问它:

getUserName(1).then(name => {
   console.log('El nombre es: ' + name);
});

或在异步函数中:

async function access() {
    const name = await getUserName(1);

    console.log('El nombre es: ' + name);
}

关于异步函数的好文章:https://developers.google.com/web/fundamentals/primers/async-functions