1.동기적 처리와 비동기적 처리
Syncronous(동기) : 요청을 보낸 후 , 해달 요청의 응답을 받아야 다음 동작을 실행 (순차적으로 실행한다.)
Asynchronous(비동기): 요청을 보낸 후, 응답과 관계없이 다음 동작을 실행(코드를 실행후 완료와 관계 없이 다음 줄이 실행된다)
javascript는 다른 언어와 마찬가지로 동기적 처리가 기본이지만, 일부 기능은 비동기적으로 처리가 가능하도록 관련 기능을 추가로 제공한다.
주요 비동기적 처리
오래 걸리는 기능은 비동기적으로 처리된다.
-Rest API 요청
-파일/데이터베이스 처리
-타이머, 암호화/복호화 등
비동기 처리 예(setTimeout 함수)
setTimeout(function,millisecond)milliseconds :ms 만큼 기다리기
function:milliseconds 에서 설정한 ms 만큼 기다린 후, 호출할 함수
console.log("promise 연습");
setTimeout(() => {
console.log("연습합니다");
},3000);
console.log("zontae")
비동기 처리의 문제점
예를 들어, Rest API 를 호출해서 결과값을 받아서, 이를 기반으로 코드를 실행하는 경우를 생각해보기 한다.
해당 함수 호출 후, 결과값을 받지 않을 채로, 다음 코드가 실행되면, 전체 코드 실행에 문제가 된다.
(최근 Rest API호출을 위해 axios를 많이 사용하는 추세이다)
비동기 처리의 문제점을 해결할 수 있는 콜백함수(Callback Function)
function func1(){
setTimeout(() => {
console.log(1);
},1000);
}
function func2(){
console.log(2);
}
func1();
func2();
1 출력후 2 가 출력되게 하고 싶으면 어떻게 해야할까?? ----> callback 함수를 사용하면 된다.
콜백 함수 설정
function func1(callback){
setTimeout(() => {
console.log(1);
callback();
},1000);
}
function func2(){
console.log(2);
}
func1(func2);
하지만 callback 함수를 사용하다 보면 callback 지옥에 빠질 수 있다.
tep1(function (value1) {
step2(function (value2) {
step3(function (value3) {
step4(function (value4) {
step5(function (value5) {
step6(function (value6) {
// Do something with value6
});
});
});
});
});
});
이 콜백 함수의 단점을 극복하고자 ES6에서 Promise 문법이 추가 되었다.
2.Promise
1.new 로 Promise 객체 생성
2.Promise 객체에서는 excutor라는 함수가 자동으로 실행되고 executor 라는 함수는 resolve 와 reject 라는 두 개의 함수를 인자로 받아서 비동기 처리 함수를 실행한다.
3.executor를 통해 비동기 처리 함수를 실행 완료 후, 해당 작업이 성공이면 resolve, 실패면 reject 함수를 호출한다.
promise의 3가지 상태(states)
위 코드에서 promise 변수(즉, promise 객체)는 다음과 같이 3가지 상태를 가질 수 있습니다.
pending(대기) : 비동기 처리가 아직 실행되지 않은 상태
fulfilled(이행) : 비동기 처리가 성공적으로 완료된 상태
rejected(실패) : 비동기 처리가 실패한 상태
then메서드
위 코드에서 작업 성공 또는 실패시, 수행할 작업을 정의하고, promise 코드를 실행해주는 메서드
두 콜백 함수를 인자로 받습니다.
successCallback : 작업 성공 시의 실행 함수
failureCallback : 작업 실패 시의 실행 함수
promise.then(successCallback ,failureCallback)
const promise = new Promise((resolve,reject) => {
setTimeout(() => {
let num = 10;
if(num >= 50){
resolve(num);
} else{
reject("error");
}
},1000);
});
promise.then(
(num) => {
console.log("success",num);
},
(err) => {
console.log(err);
}
)
then 메서드에 하나의 함수만 선언할 경우, 이는 successCallback 동작만 선언한 것이다.
const promise = new Promise((resolve,reject) => {
setTimeout(() => {
let num = 10;
if(num >= 5){
resolve(num);
} else{
reject("error");
}
},1000);
});
promise.then(
(num) => {
console.log("success",num);
});
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
let num = 10;
if (num >= 5) {
resolve(num);
} else {
reject("error");
}
}, 1000);
});
promise.then(
(num) => {
console.log("success", num);
}
).then(
() => {
console.log("Two success");
}
)실행 순서에 맞춰줄 필요가 있을 경우 , then 을 이어서 작성 해줄 수 있다. (콜백지옥에서 해방됨!!)
catch 메서드
실행 중 ,예외 상황을 처리함 (java try catch랑 비슷하다)
failureCallback 가 정의되어 있지 않을 경우 , reject시에도 catch 메서드 호출한다.
const promise = new Promise((resolve,reject) => {
setTimeout(() => {
let num = 10;
if(num >= 55){
resolve(num);
} else{
reject("error");
}
},1000);
});
promise.then(
(num) => {
console.log("success",num);
}
).catch(
(error) => {
console.log(error);
}
)
chaining
then 메서드를 연결해서, 순차적으로 실행되어야할 코드를 연결할 수 있음
then 과 catch 메서드도 함께 연결해서 실행가능함
const promise = new Promise((resolve,reject) => {
setTimeout(() => {
let num = 10;
if(num >= 5){
resolve(num);
} else{
reject("error");
}
},1000);
});
promise
.then(
(num) => {
console.log("success1",num);
throw new Error("error");
}).then(
() => {
console.log("success2",)})
.catch(
(error) => {
console.log(error);
})
.then(() => {
console.log("success3")});
chaining과 return
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
let num = 10;
if (num >= 9) {
resolve(num);
} else {
reject("this is an error");
}
}, 500);
});
promise
.then((num) => {
console.log("success1", num);
return 2; /* return 값이 다음 then 의 인자로 넘겨짐 */
})
.then((num) => {
console.log("success2", num);
});
finally
finally() 는 promise 가 resolve 되든 reject 되는 마지막에 해달 함수를 실행한다 (java try catch finally랑 비슷하다)
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
let num = 10;
if (num >= 9) {
resolve(num);
} else {
reject("this is an error");
}
}, 500);
});
promise
.then((num) => {
console.log("success1", num);
return 2; /* return 값이 다음 then 의 인자로 넘겨짐 */
})
.then((num) => {
console.log("success2", num);
})
.finally(() => {
console.log("finally");
});
promise.all
동기화 처리할 promise를 묶어서 한번에 실행 한다.
여러 함수가 다 실행이 완료된 후에, then 구문을 실행한다.
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("100ms"), 100);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("500ms"), 500);
});
Promise.all([promise1, promise2]).then((data) => {
console.log(data);
});
promise.race
여러 함수 중 , 제일 빠르게 실행완료된 함수만 then 구문을 실행한다.
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("100ms"), 100);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("500ms"), 500);
});
Promise.race([promise1, promise2]).then((data) => {
console.log(data);
});
'js' 카테고리의 다른 글
| Js - symbol (0) | 2022.08.28 |
|---|---|
| Js - 화살표 함수 (0) | 2022.08.28 |
| Js- 형 변환 (0) | 2022.08.28 |
| Js - alert, prompt, confirm (0) | 2022.08.28 |
| js 파일 수정후 수정 내역이 바로 적용 안될때 (0) | 2022.06.28 |
