비동기 화살표 기능의 구문


496

async키워드를 사용 하여 자바 스크립트 함수를 "비동기"(예 : 약속 반환)로 표시 할 수 있습니다 . 이처럼 :

async function foo() {
  // do something
}

화살표 함수에 해당하는 구문은 무엇입니까?


2
적어도 파이어 폭스와
바젤

15
var foo = async () => await Promise.resolve('ha');-잘 작동합니다
Jaromanda X

2
it doesn't work은 의미가 없습니다 ... 오류가 발생합니까? "작동하지 않는"코드와 작동하지 않는 방법에 대한 의미있는 설명 없이는 다른 작업을하고있을 수 있습니다. 잘못된 작업 (또는 오래된 브라우저 사용)을 추측 할 수 있습니다.
Jaromanda X

1
@Pointy 일 수도 있지만 현재 Firefox 및 chrome 및 node.js (7.7.4)에서 기본적으로 작동합니다.
Jaromanda X

1
ES2017 스펙 비동기 화살표 함수 정의 @Pointy의 단면을 갖는다.
Heretic Monkey

답변:


841

비동기 화살표 기능은 다음과 같습니다.

const foo = async () => {
  // do something
}

비동기 화살표 함수 는 전달 된 단일 인수에 대해 다음과 같습니다 .

const foo = async evt => {
  // do something with evt
}

비동기 화살표 함수여러 인수에 전달 된 경우 다음과 같습니다.

const foo = async (evt, callback) => {
  // do something with evt
  // return response with callback
}

익명의 형태뿐만 아니라 작동합니다 :

const foo = async function() {
  // do something
}

비동기 함수 선언 은 다음과 같습니다.

async function foo() {
  // do something
}

콜백 에서 비동기 함수 사용 :

const foo = event.onCall(async () => {
  // do something
})

11
OP는 표시되지 않은 구문 인 명명 된 비동기 화살표 기능을 찾고있는 것 같습니다.
jfriend00

48
실제로 const foo = async () => {}라는 이름의 비동기 함수를 만듭니다 foo. 이런 식으로 명명 된 기능을 수행하는 것은 전적으로 가능합니다. ES2016 +에서 변수에 익명 함수를 할당하면 변수가 선언 된 경우 변수의 이름을 지정합니다.
Benjamin Gruenbaum

5
@BenjaminGruenbaum 함수라고 부르지 마십시오. js에서 명명 된 익명 함수는 재귀 익명 함수를 작성할 때 foo = function bar () {}대체하기 위해 만들어진 매우 구체적인 구문 입니다 arguments.callee. foo함수에 대한 참조 인 변수 가 있습니다.
slebetman 2016 년

18
당신이 할 때 ES2015 이후 @slebetman은 const foo = async () => {}함수의 이름을로 설정되어 foo- ecma-international.org/ecma-262/6.0/...ecma-international.org/ecma-262/6.0/... -에 대한 설명을 참조 esdiscuss.org / topic /…
Benjamin Gruenbaum 2016 년

1
@FarisRayhan 다른 상수와 마찬가지로 변수의 참조 somefunction는 설정된 후에 변경할 수 없습니다. (익명 비동기 함수를 가리 킵니다.)
Qwerty

129

이것은 async화살표 함수 표현식명명 된 변수 에 할당하는 가장 간단한 방법입니다 .

const foo = async () => {
  // do something
}

(참고 이것은 엄격하게 일치하지 않는 것을 async function foo() { }. 게다가 간의 차이 function키워드 화살표 발현 이 대답 함수가되지 않는다 "위로 게양" ).


11
명명 된 함수 표현식은 자바 스크립트에서 매우 특정한 구문입니다. 이것은 명명 된 함수 표현식이 아닙니다. 한 단어가 두 가지를 의미하도록 진화 할 수있을 때 나중에 혼란을 피하려면 올바른 단어를 사용하는 것이 중요합니다. 참고로, 명명 된 함수 표현식은 다음과 같습니다 foo = function myName () {}. 이름은 myName익명 함수 내부에만 존재하도록 지정되며 외부에는 정의되지 않습니다. 목적은 arguments.callee재귀 익명 함수를 작성할 때 바꾸는 것입니다 .
slebetman 2016 년

1
이것은 (화살표) 함수 표현식이고 명명 된 함수 (즉 foo.name === 'foo')로 끝나기 때문에 기술에 대해 @slebetman에게 이의를 제기하려고했습니다 . 그러나 const* statement * 의 이니셜 라이저에 있기 때문에 이것을 "명명 된 비동기 화살표 함수 표현식"이라고 부르는 것은 옳지 않다는 것을 의미합니다. 명명 된 함수 표현식의 이름은 자체 본문 에만 바인딩 되어 있지만 함수의 name속성 에도 저장되므로 디버깅하기에 좋습니다 (더 자주 이름을 지정하는 이유이기도 함).
Vaz

3
달리 말하면, "명명 된 화살표 함수 표현식"과 같은 것은 없지만, const 또는 let (호이 스팅 때문에 var에 대해 확실하지 않음)의 일부가되어 "명명"될 수 있습니다. fn.name범위 내에서 바인딩을 갖는 이름 (변수).
Vaz

41

즉시 호출 된 비동기 화살표 기능 :

(async () => {
    console.log(await asyncFunction());
})();

즉시 호출 된 비동기 함수 표현식 :

(async function () {
    console.log(await asyncFunction());
})();

18

매개 변수가있는 비동기 화살표 함수 구문

const myFunction = async (a, b, c) => {
   // Code here
}

17

기본 예

folder = async () => {
    let fold = await getFold();
    //await localStorage.save('folder');
    return fold;
  };

13

당신은 또한 할 수 있습니다 :

 YourAsyncFunctionName = async (value) => {

    /* Code goes here */

}

4
하나의 매개 변수를 사용하면 괄호가 필요하지 않습니다. YourAsyncFunctionName = 비동기 값 => {/ * 코드는 여기로 이동 * /}
Takács Zsolt
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.