获取方法在 function 外部有效，但在 function 内部无效

Question

I'm just getting started with javascript so please bear with me. I'm trying to fetch a value from an API but I'm struggling with it.

This "works" as in it prints the name I'm trying to get.

let nameURL = "/login/userInfo/name?email=" + email;

 fetch(nameURL, { method: "GET" })
  .then((res) => res.json())
  .then((json) => {
    console.log(json[0])
    
  });

This doesn't work, returns an undefined value:

let nameURL = "/login/userInfo/name?email=" + email;



function getName() {
    fetch(nameURL, { method: "GET" })
      .then((res) => res.json())
      .then((json) => {
        return json[0]
        
      });
  }
  
  console.log(getName())

What I want to do is use that function to bring out json[0], as I need it to use that information.

EDIT: since I'm using React, I ended up using the fetch call inside a component and then using hooks to set values.

Answer 1

let nameURL = "/login/userInfo/name?email=" + email;

// this is your function: it works fine, except that you need to
// `return fetch`, and you don't need to specify `GET` because
// that's the default
function getName() {
  return fetch(nameURL)
    .then((res) => res.json())
    .then((json) => json[0]);
}

// You need to `.then` it to get the result, 
getName().then((name) => {
  // do other work with `name`
})

As @Alex said you can also do this with the async/await syntax:

async function getName() {
  const res = await fetch(nameURL)
  const json = await res.json()
  return json[0]
}

// somewhere else
getName().then((name) => {});
// or
(async () => {
  const name = await getName()
})();