[Javascript] async, await

박세화·2023년 5월 23일

Javascript

목록 보기

2/12

일상적으로 사용은 하고 있는데 나의 개념 이해에 뭔가 아직 안개가 껴있는 느낌이라 생활코딩 채널의 수업을 들었다.

🌳 동기, 비동기

console.log(1)
console.log(2)
setTimeout(function(){console.log(3)},5000)
console.log(4)

이 코드에서 세번째 줄은 다른 줄들과 상관없이 자신만의 길을 간다. 5초가 지나면 3을 출력함.
그리고 마지막 줄은 세 번째 줄의 실행을 기다리지 않고 먼저 실행된다.

👆 세 번째 줄이 바로 비동기적 함수(async)이다!

동기적 함수는 앞 순서가 끝날 때까지 기다려서 차례차례 실행되느라 속도가 느린 반면, 비동기적 함수는 멀티 태스킹처럼 동시에 실행이 되기 때문에 처리 속도가 빠르다. (각 함수가 자신만의 시간을 갖고 있음)

사진 출처 https://medium.com/@vivianyim/synchronous-vs-asynchronous-javascript-de4918e8ad62

📌 통신을 할 때에, 주 기능이 아닌 함수를 처리할 때 비동기를 많이 쓴다.

통신이 끝날 때까지 전체 코드가 다 멈춰있는 것은 비효율적이므로, 다른 일을 하고 있다가 통신이 끝났을 때 콜백으로 일을 처리하면 좋을 것!

사이드 개념 : Ajax

네이버 검색창에 글자를 타이핑하면 관련 검색어들이 로드됨. 페이지가 새로 로드되지 않고도 그 정보들을 받아올 수 있음.
👉 웹 서버와 브라우저가 리로드 없이 자바스크립트를 통해 몰래 통신하는 것을 Ajax 라고 함

🌳 Promise

보통 외부 URL을 가져오는 fetch의 경우 언제 그 동작이 완료될지 모르기 때문에 그냥 쓰면 비효율적이다. 그러므로 비동기 async await를 이용해 비동기 함수로 만들어주는 것!!

📌 fetch의 동작과정

fetch 함수를 부르면, pending되는 동안은 response 객체를 담은 promise 를 리턴한다.
👉 그리고 나서?
.then() : 불러온 응답 response를 준다.
.catch() : 실패했다는 에러
(한마디로 부르면 곧 줄게~라는 프로미스를 리턴하고, 다 부르고 나면 응답을 주는 것)

fetch("URL")
	.then(function(response){
		return response.json();
  		//promise를 리턴
        });
	.then(function(data){
      	console.log(data)
      	//펜딩이 끝나고 전달된 데이터를 호출
     });

response에는 URL에서 가져온 JSON형태의 응답이 담김. 근데 이 response또한 promise이다(아직 데이터를 다 받지 않은 상태이기 때문. body가 아직 안오고 head만 전달되었다던가)
data 에는 다 전달받은 응답이 담김. 우리가 원하는 최종 데이터!

🌳 async, await

console.log('start')
timer(1000).then(function(time){
	console.log('time:'+time);
    return timer(time+1000)
}).then(function(time){
	console.log('time:'+time);
    return timer(time+1000)
}).then(function(time){
	console.log('time:'+time);
    console.log('end');

👉 이 코드를 async await을 이용해서 고치면?

async function run(){
	console.log('start')
    let time = await timer(1000);
    console.log('time:'+time);
    time = await timer(time+1000);
    console.log('time:'+time);
    time = await timer(time+1000);
    console.log('time:'+time);
    console.log('end');
}    
run();

.then을 통해 받았던 time이라는 결과값을
```
	변수 = await func
```
형태로 변수 안에 담을 수 있다.
이제 run()이라는 함수는 다른 외부 함수들의 진행과 상관없이 독자적으로, 비동기적으로 동작하는 함수가 된다.

async 또한 promise를 반환한다

async function run(){
	...
}
async fucntion run2() {
	console.log('parent start');
	await run();
	console.log('parent end');
}
run2();

async 함수인 run() 은 promise를 반환한다.
그렇다는 말은? async 함수 앞에 await를 또 붙일 수 있다!
결과적으로 내가 쓴 코드 순서대로 모든 것을 출력할 수 있다!

🌳 new Promise

function job1() {
	return new Promise(function(resoleve, reject){
		setTimeout(function(){
    		resolve('resolved ok!');
    	}, 2000);
	});
};
job1().then(function(data){
	console.log('data', data);

Promise 객체를 생성할 수 있다. 그리고 함수의 첫 번째 파라미터는 성공했을 때 호출할 함수(resolve), 두 번째 파라미터는 실패했을 때 호출할 함수(reject)
job1 함수가 promise 를 반환하므로, 그 후에 .then을 붙여주면 data를 받을 수 있다