2024-10-21(비동기-promise,async/await,fetch)

동기 : 작업이 순서대로 처리, 앞에 순서가 끝나야 뒤에 작업 가능

비동기 : 작업이 병렬적으로 처리, 앞에 순서가 오래걸리면 다른 작업 동시에 가능

https://poiemaweb.com/js-async

 

자바스크립트는 Non-Blocking I/O 를 가진 비동기를 지원하는 언어

* Blocking : 시간소요 + 동기 함수

 ㄴ console.log는 시간소요x , 동기

* Non-Blocking : 시간소요 + 비동기 함수

* I/O : 입출력 시스템(input/out)

프로미스

• 비동기 처리를 위한 패턴
• 매개변수 : resolve(성공시), reject(실패시)
• setTimeout은 비동기함수이나, 프로미스는 아님❌
• 결과 처리 : then, catch
• 생성자 함수(new Promise)는 동기, 결과 처리(then,catch)는 비동기

console.log('1');
new Promise((resolve,reject)=>{
   console.log('2');
   resolve('4');
});
console.log('3');

async / await

• 프로미스를 좀 더 간단하게 사용
• 함수앞에 async 키워드 사용
• await는 async 함수내에서만 사용가능
• 에러처리 : try...catch
• 가독성👍

fetch

• 최신 방식의 네트워크 요청 방법
• get요청 : api로부터 데이터를 가져올때
• post요청 : api로 데이터를 저장할때