프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다 !
-비동기란 ? 함수가 병렬적으로 실행되는 것을 말한다! 비동기적 명령을 동시에 실행시켰다 하면 각자의 자기 시간표에 맞춰서 실행이 된다! 비동기적은 동시적으로 실행이 되면서 빠른속도로 실행이 가능하게 해준다!
ex) 서버요청 , 통신 할 떄 많이 쓰임 페이지를 먼저 리로드 시키고 서버에 데이터를 받아온다!
다시 돌아와 Promise 는 주로 서버에서 받아온 데이터를 화면에 표시할 때 많이 쓰인다
// promise
new Promise(function(resolve, reject){
setTimeout(function() {
resolve(1);
}, 2000);
}) //promise 객체를 출력한다
.then (function(result){
console.log(result); // 1
return result + 10 //result = 1 + 10 11
}) //리턴을 해서 프로미스 객체를 호출한다 그러므로 then을 사용할 수 있다
.then(function(result) {
console.log(result) // 11
return result + 10 // result = 11 + 10 = 21 리턴을해서 또 then 을 사용할 수 있다
})
.then(function(result){
console.log(result); // 21
})
예시로 Promise에서 리턴하면 두가지 함수값을 사용할 수 있다!
then(). 에 파라미터는 result 를 알려주고 -> 성공했을때 then으로 전달된 콜백함수가 호출되도록 약속이 되어 있음 콜백함수가 호출되면서 그 결과값이 있으면 첫번째 파라미터로 받을 수 있다 / 결과값으로 response 객체가 전달되었다! 라는걸 알려준다 !
catch() 에 파라미터는 reason 캐치 안으로 전달된 콜백함수가 실행되고 실패한 이유를 알려준다
프로미스를 사용하는 이유는 비동기적인 작업을 처리할 때 성공했는지 실패했는지를 표준화된 방식을 이용해서 처리할수 있도록 해준다 //성공시 then , 실패시 catch // 표준화된 방식을 이용해서 알려준다!
프로미스의 단점을 보완하고 가독성 좋은 코드를 작성하게 도와준다 !
async 는 평범한 함수를 프로미스를 리턴하는 비동기적인 함수로 만들어주는 키워드이고
그렇기 때문에 함수안에서는 await 를 사용할 수 있게 해준다 왜냐 비동기적이니깐!
ex)
async await은 함수 안에서 사용이 가능하다
async function run() {
console.log("start");
let time = await timer(1000);
console.log("tome" + time);
time = await timer(time + 1000);
console.log("tome" + time);
time = await timer(time + 1000);
console.log("end");
}
console.log('parent start');
run();
비동기적인 함수앞에 이 함수가 실행되는걸 기다려줘라 해서 await을 붙임