async/await ?

async/await 은 자바스크립트에서 Promise 객체를 통해 처리하던 비동기 처리를 더 쉽고, 편하게 처리/사용할 수 있도록 나온 ECMAScript 2017 문법이다.

 

async/await 기본문법

async function 함수명() {
	await 비동기처리메서드명();
}

비동기 처리메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 작동한다.

promise 앞에 await keyword를 붙이면, javascript는 promise가 처리될 때 까지 대기하고, 처리가 완료되면 조건에 따라 동작한다.

1. 에러발생 => 예외 생성

2. 에러 미발생 => 프로미스 객체의 result 반환

 

async/await 예외처리

async function 함수명(){
	try{
    	...
    }
    catch(err){
    	console.log(err);
    }
}

try/catch 로 예외처리

 


[ + ] 나중에 내용 더 추가할 예정

728x90

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] setTimeout, setInterval  (0) 2022.07.27
[ Javascript ] Array.prototype Methods  (0) 2022.03.08
[ Javascript ] Promise  (0) 2022.03.06
[ Javascript ] Class { ES6 (ES2015) }  (0) 2022.02.20
[ Javascript ] Set Object  (0) 2022.01.11

Asynchronous ( 비동기 )적 처리는 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도 되는 데이터 처리 방식

Synchronous ( 동기 )적 처리는 작업을 요청함과 동시에 작업의 결과를 그 자리에서 받을 수 있는 데이터 처리 방식


Promise

Javascript Engine은 Single Thread로 동시에 두가지 작업을 할 수 없다. 이러한 Javascript가 비동기 처리를 할 수 있게 나온 것이 Promise이다.

 

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 

► 코드의 실행 흐름에서 비동기처리를 유연하게 처리하기 위한 API

 

Promise 객체 상태

1. 대기 ( pendding ) : 이행하지도, 거부하지도 않은 초기 상태.

2. 이행 ( fulfilled ) : 연산이 성공으로 완료됨.

3. 거부 ( rejected ) : 연산이 실패함.

 

Promise.prototype.then() 및 Promise.prototype.catch() 메서드의 반환 값은 새로운 Promise로서 서로 연결할 수 있다. 



 

Promise 객체는 return 값으로 새로운 Promisse를 만들며 이는 서로 연결할 수 있다. 

 

Pendding  대기

new Promise() 메서드를 호출했을 때 pendding ( 대기 ) 상태이다.

Promise 메서드의 인자는 콜백함수이며, 콜백함수의 인자는 resolve, reject 이다.

new Promise(function(resolve, reject) {
	...
});

 

Fulfilled 이행

new Promis() 메서드의 콜백함수에서 resolve()를 수행하면 Fulfilled 이행 상태가 된다.

new Promise(function(resolve, reject) {
	resolve(); // 수행한 경우 fulfilled state
});

이행이 되면 .then() 메서드를 통해서 return 값을 받을 수 있다.

 

Rejected 실패

new Promise() 메서드의 콜백함수에서 reject()를 호출하면 Rejected 실패 상태가 된다.

new Promise(function(resolve, reject) {
	reject(); // rejceted state가 된다.
});

reject 반환값은 .then.catch(error)를 통해서 받을 수 있다.

 

 

참고 :

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

728x90

'Language > Javascript' 카테고리의 다른 글

[ Javascript ] Array.prototype Methods  (0) 2022.03.08
[ Javascript ] async/await  (0) 2022.03.07
[ Javascript ] Class { ES6 (ES2015) }  (0) 2022.02.20
[ Javascript ] Set Object  (0) 2022.01.11
[ Javascript ] Map Object  (0) 2022.01.11

+ Recent posts