Async/Await에 대해 내가 놓친 이상한 점: Implicit Returns

5561 단어 javascript
지금까지 한동안 async/await 구문을 사용해 왔기 때문에 지금까지 이것을 몰랐지만 이제서야 깨달았습니다.

비동기 함수는 Promise를 암시적으로 자동으로 반환합니다. 이를 위해 아무것도 할 필요가 없습니다(예: 비동기 함수 내에서 수행할 필요 없음return new Promise((resolve)=>{/*...*/})(명시적으로 필요하지 않는 한)).

예시
이 스니펫:

async function foo(){
    return "foo";
}


다음 스니펫과 동일합니다.

async function foo(){
    return Promise.resolve("foo");
}


우리의 편의를 위해 JavaScript는 위의 변환 자체를 자동으로 수행합니다.
아무 것도 반환하지 않더라도 여전히 위의 변환이 수행됩니다. 즉,

async function foo(){}
// is an equivalent of:
// async function foo(){ return Promise.resolve(undefined); }

// Let's call foo to confirm our claim:
foo();
// Prints: Promise {<fulfilled>: undefined}


이제 이것을 이해하는 것이 왜 유용할까요? 개인적으로 저는 우리가 await 키워드를 사용할 때마다 일종의 Promise와 *연결*되어야 한다는 것을 알고 있었습니다. 예를 들어 다음과 같이 할 수 있습니다.

const delayFoo = ms =>
  new Promise(
    resolve =>
      setTimeout(() => resolve("foo"), ms)
  );
const delayFooThreeSeconds = () => delayFoo(3000); // (*) This returns a Promise explicitly.

// now inside some async function:
async function demo(){
    console.log("foo", 1);
    console.log(await delayFooThreeSeconds(), 2); // (*) This awaits the Promise returned explicitly by the call to delayFooThreeSeconds.
    console.log("foo", 3);
}

demo();


delayFoo는 Promise를 명시적으로 반환하는 함수의 예입니다. 하지만 함수가 반환되지 않는 지점에서 함수 내에서 비동기 호출이 필요한 경우에는 어떻게 해야 할까요? 예를 들어 함수가 비동기 작업을 수행하고 다른 비동기 함수 내에서도 자체적으로 대기해야 하는 중첩된 비동기/대기를 고려하십시오.

async function bar(){ // <-- (*) This function is not returning any Promises explicitly.
  doSomething();
  await delayFooThreeSeconds()
  doSomethingElse();
}
async function baz(){
  await bar(); // <--- (*) Would this be possible?
}


이제 bar 함수는 Promise를 명시적으로 반환하지 않으므로 baz 내부에서 기다릴 수 있습니까? 위의 함수가 암묵적으로 Promise를 반환하기 때문에 지금쯤 정답을 짐작하셨겠지만 "예"입니다. (비동기 함수 내에서 여러 개의 비동기 호출이 래핑된 경우에도 약속의 계층 구조는 비동기 함수의 호출과 동일합니다.)

다음은 더 나은 작업을 수행하고 확인할 수 있는 몇 가지 작업 예입니다. https://playcode.io/928113/


또한 우리가 프로그래밍 영역에서 배운 것을 서로 공유하는 아주 작고 신생 Discord 커뮤니티인 TIL("Today-I-Learned"를 의미함)에 가입하는 것을 환영합니다. 여기에서 가입하세요: https : // discord.gg / ATp8gc7G . 이 기사를 읽어 주셔서 감사합니다.

좋은 웹페이지 즐겨찾기