가져오기: 가져오기 응답을 사용하여 변수를 설정하고 함수에서 반환합니다.

가져오기: 가져오기 응답을 사용하여 변수를 설정하고 함수에서 반환합니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

비동기 호출에서 응답을 반환하려면 어떻게 해야 합니까? (42개 답변)

마감됨6년 전에.

저는 자바스크립트에 익숙하지 않아서 반응합니다.지정된 서버에서 customer_name을(를) 가져오는 구성 요소에서 콜백이 있습니다.가져오기가 작동하고 console.log가 전체 이름을 올바르게 인쇄하지만 마지막 .then에 있는 customer_name이 설정되지 않고 함수가 빈 문자열을 반환합니다.왜 그런 것일까요?

// Gets the fullname of the customer from an id.
tj_customer_name(id) {
  let customer_name = '';

 fetch(`/customers/${id}.json`, {
   headers: API_HEADERS,
   credentials: 'same-origin'
 })
 .then((response) => {
   if(response.ok) {
     return response.json();
   } else {
     throw new Error('Server response wasn\'t OK');
   }
 })
 .then((json) => {
   customer_name = json.first_name.concat(' ').concat(json.last_name);
   console.log(customer_name);
 });
 return customer_name;
}

당신은 약속을 제대로 이해하지 못하는 것 같습니다.약속이 해결되기 전에 반환 문을 호출하여 빈 문자열을 반환합니다.

이 문제를 해결하는 한 가지 방법은 다음과 같이 모든 약속을 되돌리는 것입니다.

// Gets the fullname of the customer from an id.
tj_customer_name(id) {
  let customer_name = '';

  return fetch(`/customers/${id}.json`, {
    headers: API_HEADERS,
    credentials: 'same-origin'
  })
  .then((response) => {
    if(response.ok) {
        return response.json();
    } else {
        throw new Error('Server response wasn\'t OK');
    }
  })
  .then((json) => {
    return json.first_name.concat(' ').concat(json.last_name);
  });
}

또는 ES7 접근 방식을 사용하여 비동기/대기를 사용할 수 있습니다.

async function tj_customer_name(id) {
    const response = await fetch('some-url', {});
    const json = await response.json();

    return json.first_name.concat(' ').concat(json.last_name);
}

보다시피 두 번째 접근 방식이 훨씬 깔끔하고 읽기 쉽습니다.

함수를 호출하는 코드에서도 결과는 동일합니다.

tj_customer_name(1).then(fullName => {
    console.log(fullName);
});

또는

async function something() {
    const fullName = await tj_customer_name(1);
    console.log(fullName);
}

가져오기는 비동기적이고 약속을 반환하기 때문에 본질적으로 비동기적으로만 관찰할 수 있습니다(사용)..then).

당신은 아마도 당신의 기능에 당신이 만든 약속 체인을 돌려주고 돌아와야 할 것입니다.customer_name지난번에.then체인 콜백:

// Gets the fullname of the customer from an id.
tj_customer_name(id) {

 // return the entire promise chain
 return fetch(`/customers/${id}.json`, {
   headers: API_HEADERS,
   credentials: 'same-origin'
 })
 .then((response) => {
   if(response.ok) {
     return response.json();
   } else {
     throw new Error('Server response wasn\'t OK');
   }
 })
 .then((json) => {
   const customer_name = json.first_name.concat(' ').concat(json.last_name);
   return customer_name; // return the customer_name here
 });
}

// later, use the function somewhere
this.tj_customer_name(21).then((customer_name) => {
    // do something with the customer_name
});

PS: 다음을 추가하는 것을 잊지 마십시오..catch잠재적인 네트워크 문제를 처리하는 핸들러(https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful) 참조)

언급URL : https://stackoverflow.com/questions/38869197/fetch-set-variable-with-fetch-response-and-return-from-function