자바스크립트 비동기
"async 및 await를 사용하면 약속을 더 쉽게 작성할 수 있습니다."
async 는 함수가 Promise를 반환하도록 합니다.
await 는 함수가 Promise를 기다리게 합니다.
비동기 구문
함수 앞 의 키워드 async는 함수가 약속을 반환하도록 합니다.
예시
async function myFunction() {
return "Hello";
}
와 같다:
function myFunction() {
return Promise.resolve("Hello");
}
Promise를 사용하는 방법은 다음과 같습니다.
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
예시
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
또는 일반 값을 기대하기 때문에 더 간단합니다(오류가 아닌 일반 응답).
예시
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
구문 대기
함수 앞 의 키워드 await는 함수가 약속을 기다리게 합니다.
let value = await promise;
키워드 는 함수 await내에서만 사용할 수 있습니다
.async
예시
천천히 가서 사용법을 배워봅시다.
기본 구문
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
두 개의 인수(resolve 및 reject)는 JavaScript에 의해 미리 정의됩니다.
우리는 그것들을 생성하지 않을 것이지만, 실행기 기능이 준비되면 그것들 중 하나를 호출합니다.
매우 자주 거부 기능이 필요하지 않습니다.
거부가 없는 예
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
시간 초과를 기다리는 중
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
파일을 기다리는 중
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
브라우저 지원
ECMAScript 2017에서는 JavaScript 키워드
async및 await.
다음 표는 두 가지 모두를 완벽하게 지원하는 첫 번째 브라우저 버전을 정의합니다.
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |