약속에서 반환 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.