약속에서 반환 then ()


118

다음과 같은 자바 스크립트 코드가 있습니다.

function justTesting() {
  promise.then(function(output) {
    return output + 1;
  });
}

var test = justTesting();

항상 var 테스트에 대해 정의되지 않은 값이 있습니다. 약속이 아직 해결되지 않았기 때문이라고 생각합니다 .. 약속에서 값을 돌려주는 방법이 있나요?


21
then()호출 의 반환 값 은 다시 약속이며 반환 된 값을 래핑합니다.
— Sirko 2015

구문 오류가 있습니다. 이것이 구문 분석이라고 생각하지 않습니다.
— djechlin 2015

4
justTesting은 예제에서 아무것도 반환하지 않기 때문에 test가 정의되지 않았습니다. 반품을 추가하면 테스트가 약속으로 정의됩니다.
— Jerome WAGNER 2015

1
피드백 주셔서 감사합니다. 요점은 테스트에 출력 +1을 할당하는 것입니다.
— Priscy

4
변수는 무엇인가 promise. 어디에도 정의되어 있지 않으며 justTesting()함수 에서 아무것도 반환하지 않습니다 . 더 나은 도움이 필요하다면, 당신이 정말로하려는 일을 설명하지도 못할 정도로 "꺼져있는"코드를 우리에게 보여주기보다는 해결하려는 문제를 설명해야합니다. 해결하려는 문제를 설명하십시오.
— jfriend00 2015

답변:


136

then()콜백 에서 무언가를 반환 하는 것은 약간의 마술입니다. 값을 반환하면 다음 then()값이 해당 값으로 호출됩니다. 그러나 약속과 같은 것을 반환하면 다음 약속이 then()대기하고 해당 약속이 해결 될 때만 호출됩니다 (성공 / 실패).

출처 : https://developers.google.com/web/fundamentals/getting-started/primers/promises#queuing-asynchronous-actions


이런 이유 때문에 나는 stackoverflow.com/q/53651266/2028440
— Bằng

83
질문에 대답하지 않았습니다.
— Andrew

관련 링크
— Marinos An

1
그렇다면 해결책은 무엇입니까?
— Apurva

58

promise를 사용하려면 promise를 생성하는 함수를 호출하거나 직접 생성해야합니다. 실제로 해결하려는 문제가 무엇인지 설명하지는 않지만 다음은 직접 약속을 만드는 방법입니다.

function justTesting(input) {
    return new Promise(function(resolve, reject) {
        // some async operation here
        setTimeout(function() {
            // resolve the promise with some value
            resolve(input + 10);
        }, 500);
    });
}

justTesting(29).then(function(val) {
   // you access the value from the promise here
   log(val);
});

// display output in snippet
function log(x) {
    document.write(x);
}

또는 약속을 반환하는 함수가 이미있는 경우 해당 함수를 사용하고 약속을 반환 할 수 있습니다.

// function that returns a promise
function delay(t) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, t);
  });
}

function justTesting(input) {
  return delay(100).then(function() {
    return input + 10;
  });
}

justTesting(29).then(function(val) {
  // you access the value from the promise here
  log(val);
});

// display output in snippet
function log(x) {
  document.write(x);
}


2
어떤 날을 발생하면 두 배 return, 즉 justTesting말한다 return.then => return. 나는 이것이 내가 이것을 구현 한 bcs라는 것을 알고 있지만 (bcs linting은 나를 강요했다 new Promise), 그 반환 / 반환 쌍을 이해 / 생각하는 방법을 설명 할 수 있습니까?
— Ronnie Royston

2
@RonRoyston-먼저 전달 .then()하는 함수는 포함하는 함수와는 별도의 함수이므로 호출 될 때 자체 반환 값을 갖습니다. 둘째, .then()핸들러 의 반환 값은 프라 미스의 해결 된 값이됩니다. 따라서 .then(val => {return 2*val;})해결 된 값을 val에서 2*val.
— jfriend00

13

내가 여기서 한 것은 justTesting 함수에서 promise를 반환 한 것입니다. 그런 다음 함수가 해결되면 결과를 얻을 수 있습니다.

// new answer

function justTesting() {
  return new Promise((resolve, reject) => {
    if (true) {
      return resolve("testing");
    } else {
      return reject("promise failed");
   }
 });
}

justTesting()
  .then(res => {
     let test = res;
     // do something with the output :)
  })
  .catch(err => {
    console.log(err);
  });

도움이 되었기를 바랍니다!

// old answer

function justTesting() {
  return promise.then(function(output) {
    return output + 1;
  });
}

justTesting().then((res) => {
     var test = res;
    // do something with the output :)
    }

"// do something with the output"에 return 문을 넣으면 어떻게됩니까? 예를 들면 : 부모 함수 내에 "JustTesting (). then ..."이 있습니다. "then"부분 내에서 값을 반환 할 수 있습니까?
— mrzepka

출력으로 // do에서 값을 반환하려면 justTesing () 앞에 반환을 추가해야합니다. 예 "justTesting ()를 호출 한 후 ((고해상도)를 => {복귀 입술을}).
— Vidur Singla

좋아, 내가 기대했던 것입니다. 확인하고 싶었습니다. :) 감사합니다!
— mrzepka

그때부터 테스트를 반환하면 어떨까요?
— MeVimalkumar

3

약속의 혼란을 없애기 위해 "await"명령과 비동기 함수를 사용하는 것을 선호합니다.

이 경우 먼저 비동기 함수를 작성합니다.이 질문의 "promise.then"부분에서 호출되는 익명 함수 대신 사용됩니다.

async function SubFunction(output){

   // Call to database , returns a promise, like an Ajax call etc :

   const response = await axios.get( GetApiHost() + '/api/some_endpoint')

   // Return :
   return response;

}

그런 다음 주 함수에서이 함수를 호출합니다.

async function justTesting() {
   const lv_result = await SubFunction(output);

   return lv_result + 1;
}

여기서는 주 함수와 하위 함수를 모두 비동기 함수로 반환했습니다.


맞아요 ... await를 사용하면 문제가 해결 될뿐만 아니라 훨씬 깔끔해졌습니다
— karthikeyan
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.