📌동기
정해진 순서에 따라 순차적으로 한번에 하나씩 진행된다.
console.log("작업 1");
print();
console.log("작업 3");
function print() {
console.log("작업 2");
};동기프로그램의 문제는 Blocking 발생하는 단점이 있다.
📌비동기
동시적으로 진행되서 순서를 알 수없다.
동시에 여러 개의 관계없는 요청을 보낼 때는 요청 수 제한을 고려하고, 병렬 처리를 통해 효율적으로 관리하며, 각 요청에 대한 응답과 에러를 적절히 처리해야 합니다.
setTimeout
비동기 함수이다.
콜백함수와, 시간값을 인자로 가진다.
console.log('1');
setTimeout(()=>{
console.log('2');
}, 3000);자바스크립트는 싱글스레드인데 한가지만 되는데 어떻게 동시에 처리를 할수 있는 이유는
자바스크립트 엔진의 Web API덕분이다.
Web API 는 멀티쓰레드이며 setTimeout,fetch,DOM이 속해져있다.
callback함수
콜백함수란 다른 함수의 인자로 전달되는 값이다.
function main(callback){
callback();
}
main(function() { });비동기 콜백이란?
비동기 처리가 끝난다음에 후처리에 사용한다.
function getData(callback) {
setTimeout(()=>{
console.log('나는 콜백이야');
callback({name:'콜백'})
}, 2000);
}
getData((data)=>{
console.log(data.name);
});작업이 의존하는 경우
// 1.로그인
function login(username,callback) {
setTimeout(()=>{
callback(username);
}, 1000);
}
// 2. 장바구니에 넣기
function addToCart(product,callback) {
setTimeout(()=>{
callback(product);
}, 1000);
}
// 2. 결제하기
function makePayment(carNumber, product, callback) {
setTimeout(()=>{
callback(carNumber, product);
}, 1000);
}
// 콜백지옥 -> 유지보수도 어렵다.
login('콜백',(username)=>{
console.log(`${username}님 로그인했습니다.`);
addToCart('책',(product)=>{
console.log(`${product}가 장바구니에 추가되었습니다.`);
makePayment('000000000', product,()=>{
console.log(`${carNumber.slice(0, 6)}로 ${product}를 구매했습니다.`);
});
});
});📌Promise
비동기 처리에 사용되는 자바스크립트 객체(상태, 결과물)로 비동기 작업이 맞이할 성공과 실패를 나타낸다.
비동기 작업의 상태를 나타낸다고 할 수 있다.
- Pending: 대기
- Fulfilled: 성공
- Rejected: 실패
function getData() {
const promise = new Promise((resolve, reject)=> {
setTimeout(()=>{
const data = { name: '철수'};
if(data){
console.log('네트워크 요청 성공');
resolve(data)
} else{
reject(new Error('네트워크 문제!!!'));
}
}, 1000);
});
return promise
}
//then(). catch(). finally()
getData()
.then((data)=> {
const naem = data.name;
console.log(`${naem} 안녕하세요`);
})
.catch((error)=> {
console.log('에러처리를 했어요');
})
.finally(()=> {
console.log('마무리작업');
});
//Promise Chaining 여러가지 비동기를 순차적으로 사용할수있다.
const promise = getDate();
promise
.then((data)=> {
console.log(data);
return getDate();
})
.then((data)=> {
console.log(data);
})
// 콜백지옥 쇼핑몰 바꾸기
// 1.로그인
function login(username) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
if(username){
resolve(username)
} else{
reject(new Error('아이디를 입력해주세요'));
}
}, 1000);
}
// 2. 장바구니에 넣기
function addToCart(product) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
if(product){
resolve(product)
} else{
reject(new Error('물건을 입력해주세요'));
}
}, 1000);
}
// 2. 결제하기
function makePayment(carNumber, product) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
if(carNumber.length !== 16 || !product){
reject(new Error('올바르지않아요'));
return;
}
resolve(product);
}, 1000);
}
login('콜백')
.then((username)=> addToCart('책'))
.then((product)=> makePayment('2222222222222222',product)
.then((product)=> makePayment(product))
.catch((error)=> console.log(error.message))
.finally(()=> console.log('마무리이'));Promise.all
여러 개의 비동기 작업을 효율적으로 처리하고, 모든 작업이 완료될 때까지 기다리는 기능을 제공합니다.
Promise.race
여러 개의 비동기 작업 중에서 가장 빠르게 완료되는 작업을 선택하여 처리할 수 있습니다.
Async/ Await
async
await 프로미스가 완료될때까지 잠시 멈추어서 기다려준다.
비동기를 동기처럼 보여지게할수 있고, Promise Chaining 동작이 동일하며, 보다 가독성있다.
// async -> Promise 반환하는 비동기 함수로 변신한다.
function networkRequest() {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
console.log('데이터를 받아왔습니다');
resolve();
}, 1000);
}
async function getUser() {
await networkRequest();
return '콜백';
}
async function getTodo() {
await networkRequest();
return['청소하기','밥먹기'];
}
async function getData() {
let user
try{
user = await getUser();
}catch(error){
console.log(error.message);
user ='익명'
}
const toso = await getTodo();
console.log(user);
}
Primise, async/ await차이는
Promise패턴
then이란
setTimeout에 promise적용한다면?
동시에 여러개의 관계없는 요청을 한다면?
Micro task queue? 존재이유
