본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[35일차 20210430] 비동기 / 동기 / 콜백함수 / promise / promise.all / async await

알로호모라 2021. 4. 30. 14:57
반응형

--------------------------------------------------------------1교시----------------------------------------------------------

 

promise / 콜백함수 / 동기 / 비동기 개념 

 

 

동기 방식

 

A가 요청하면 server가 응답할 때까지 기다리는 거 - > server도 다른 요청을 안받고 A의 요청을 처리할 때까지 B의 요청을 처리 안함 

 

ex) console.log에 찍히는거 

동기 형식 (차례로)   / 비동기 (처리가능 순서) 

비동기 방식 

 

A가 요청하면 server가 응답할동안 A는 개인 일, server도 할일 함. A의 요청 진행과 무관하게 B의 요청 들어오면 처리함

 

ex) 

console.log('start1');
setTimeout(()=>{
    console.log('start2');
}, 3000);
console.log('start3');

1. start1 찍힘 

2. setTimeout 실행됨 -> 3초 뒤 콜백함수 실행해라! 실행은 하는데 아직 3초 안지남

3. start3 찍힘

4. 2번 start2 3초뒤 찍힘 

결과

 

대표적인 ex) 지도 

작은 부분까지하면 데이터가 많음 

-> 한 화면에서 데이터를 주고 받을 수 있음이 비동기 

내가 지정한 한 부분에 의해 데이터를 받는게 

 

 

 

---------------------------------------비동기에서 쓰는 내용이 콜백 Callback 함수 -----------------------------------------

 

 

express에서 mode를 짜기 시작하면 callback 함수가 필요함 

 

const 아반떼 = (a) =>{  // arrow 함수 를 아반떼에 넣음 
    setTimeout(()=>{
        console.log('아반떼 go');
    }, 3000);
}

const 소나타 = (a) =>{
    setTimeout(()=>{
        console.log('소나타 go');
    }, 1000)
}

const 그랜저 = (a) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
    },2000)
}

 

 

function 아반떼(a){}
const 아반떼 = (a) =>{}

동일 

a = 인자값

setTimeout([콜백함수],3000) 
위의 콜백함수에 arrow 함수를 넣음 
setInterval ~초 마다 vs setTimeout ~초에 실행 이후 끗 

 

 

console.log(a) 추가 

const 아반떼 = (a) =>{  // arrow 함수 를 아반떼에 넣음 
    setTimeout(()=>{
        console.log('아반떼 go');
        console.log(a);
    }, 3000);
}

const 소나타 = (a) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        console.log(a);
    }, 1000)
}

const 그랜저 = (a) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        console.log(a);
    },2000)
}

아반떼(1);
소나타(2);
그랜저(3);

 

 

function go(){
    console.log('Go Go GO!')
}

const 아반떼 = (a) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        go();
    }, 3000);
}

const 소나타 = (a) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        go();
    }, 1000)
}

const 그랜저 = (a) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        go();
    },2000)
}

아반떼(1);
소나타(2);
그랜저(3);

function in function 

 

* 요게 콜백함수 

function go(){
    console.log('Go Go GO!')
}

const 아반떼 = (a) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        a();
    }, 3000);
}

const 소나타 = (a) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        a();
    }, 1000)
}

const 그랜저 = (a) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        a();
    },2000)
}

아반떼(go);
소나타(go);
그랜저(go);

 

a 는 보통 callback 이라는 변수를 씀 (아무거나 가능) 

function go(){
    console.log('Go Go GO!')
}

const 아반떼 = (callback) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        callback();
    }, 3000);
}

const 소나타 = (callback) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        callback();
    }, 1000)
}

const 그랜저 = (callback) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        callback();
    },2000)
}

아반떼(go);
소나타(go);
그랜저(go);

 

 

 

이번엔 익명함수 넣기 

function go(){
    console.log('Go Go GO!')
}

const 아반떼 = (callback) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        callback();
    }, 3000);
}

const 소나타 = (callback) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        callback();
    }, 1000)
}

const 그랜저 = (callback) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        callback();
    },2000)
}

아반떼(()=>{
    console.log('I am an arrow function');
});
소나타(go);
그랜저(go);

 

 

 

 

아반떼, 소나타, 그랜저 순으로 만들기 (콜백함수 + 비동기) 

function go(){
    console.log('Go Go GO!')
}

const 아반떼 = (callback) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        callback();
    }, 3000);
}

const 소나타 = (callback) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        callback();
    }, 1000)
}

const 그랜저 = (callback) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        callback();
    },2000)
}

console.log('------start-----');
아반떼(()=>{                          //여기가 콜백 
    소나타(()=>{
        그랜저(()=>{
            console.log('---자동차 경주 끗---');
        })
    })
})

 콜백함수의 지옥 ..

 

 

이걸 해결하기 위해 만든게 ->promise 라는 객체

 

콜백의 반환을 어떤 객체에 담아서 

 

/* promise code frame */

new Promise( (resolve,result)=>{
    code block
})

new -> 가 있어서 결과값은 object 이다. 

이것 을 변수로 담기 

 

promise객체는 2가지 속성값이 있음

1. state : pending 

2. result : undefined (아직 결과값이 없음) 

 

처음에 이 객체가 실행이 되었을 때 상태값이 pending (대기상태) 

 

---------------------------------------------------------------------------------

콜백함수 실행되서 완료가 되었다 라고 하면

객체가 바뀌게됨

 

성공 시 

 

1. state : fulfilled 

2. result : "  " (이 값은 우리가 정함)

 

실패 시 (이동통신) 

 

1. stat : rejected 

2. result : "  " (result도 우리가 원하는 값으로 채울 수 있음) 

 

예전에 배운

connection.query("select * from board", (error,result)->{}) 요것 처럼 

const pr = new Promise( (resolve,reject)=>{
    //code block
    setTimeout(()=>{
        resolve('성공!');   // 요 value 값은 result 값으로 들어감 
        reject('실패');
    },3000)
})

console.log에 변수 pr 쳐보기 

객체에 성공이라는 글자를 넘겨준거

 

const pr = new Promise ( (resolve, reject)=>{
    setTimeout( () =>{
        reject('실패!');
    }, 3000)
})

성공했을 때, 실패했을 때 값을 따로 따로 넣어서 객체를 만들 수 있다. -> promise 객체를 생성하는 단계 

 

 

---------------

proto

pr.catch()

pr.then()

pr.finally()

를 사용할 수 있슴. 

요 세개 중요해서 사용해보기

 

const pr = new Promise ( (resolve, reject)=>{
    setTimeout( () =>{
        resolve('성공!');
    }, 3000)
})


//then의 인자값 callback함수 들어감 
//첫번재 인자값 에는 new 객체의 result 값을 반환함. ** 중요 ** 
// result라는 반환받을 변수명을 지정해줌. 
//어떨 때 실행 되는지 -> state 값이 fulfilled 일 때 이행되었을 때 
pr.then((result)=>{   
    console.log(result);
})

const pr = new Promise ((resolve, reject)=>{
    setTimeout(()=>{
        resolve('성공!');
    },3000)
})

pr.then((result)=>{
    console.log(result);
})

pr.catch((result)=>{
    console.log(result);
})

promise 의 함수 인자값 자리는 (모든 함수의 ) 정해져 있음 

첫번째가 성공했을 때, 두번째가 실패했을 때 / 변수명은 내가 정해도 됨. 

const pr = new Promise ((resolve, reject)=>{
    setTimeout(()=>{
        reject('실패!'); //성공은 resolve 써봐 
    },3000)
})

pr.then((result)=>{
    console.log(result);
}).catch((reject)=>{
    console.log(reject)
})

 

 

 

아까 위에서 한 것과 (자동차들) 비교 

 

아래 두 코드는 같음 

 

const pr = new Promise ( (resolve, reject)=>{
    setTimeout( () =>{
        resolve('성공!');
    }, 3000)
})

pr.then((result)=>{   
    console.log(result);
})
const 아반떼 = (callback) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        callback();
    }, 3000);
}

아반떼 (()=>{console.log('a')});

여기 콜백 사용하는 부분은 없음 

 

 

Pr. proto. catch 사용

 

catch 는 then 이 끝나고 이어서 사용가능 

 

 

const pr = new Promise ( (resolve, reject)=>{
    setTimeout( () =>{
        resolve('성공!');
    }, 3000)
})


pr.then((result)=>{   
    console.log(result);
}).catch ( (error)=>{ //첫번재 인자값 - 쓰고 싶은 인자값명 
    console.log(error);
})

 

=> console.log (error) 값이 안뜸. reject 값이 없으니 

 

const pr = new Promise ( (resolve, reject)=>{
    setTimeout( () =>{
        reject('error!');
    }, 3000)
})

pr.then((result)=>{   
    console.log(result);
}).catch ( (error)=>{ //첫번재 인자값 - 쓰고 싶은 인자값명 
    console.log(error);
})

 

state값이 : rejected 일 때 catch 가 실행된다. 

 

 then 이 fulfilled 일 때 , catch는 reject 일 때라고 이해하기 

 

 

--------------이제 promise 사용해서 아반떼 -> 소나타 -> 그랜저 순으로 만들어보기 ---------------

 

promise chain = promise 연결해서 쓰기 방법을 이용

 

 

promise 객체 3개 만들어 놓음 

const 아반떼 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 go!');
        },3000)
    })
}

const 소나타 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 go!');
        },2000)
    })
}

const 그랜저 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 go!');
        },1000)
    })
}


아반떼();   //안나옴 
아반떼().then; //안나옴
아반떼().then((result)=>{console.log(result)}; // '아반떼 go!' 나옴.

 

 

 

const 아반떼 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 go!');
        },3000)
    })
}

const 소나타 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 go!');
        },2000)
    })
}

const 그랜저 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 go!');
        },1000)
    })
}

아반떼().then((result)=>{
    console.log(result);
    return 소나타 ();   //소나타 함수를 실행 
})

 

저 console 창 분석 해보기 

아반떼().then((result)=>{
    console.log(result);
    return 소나타 ();   //소나타 함수를 실행 
}).then((result)=>{
    console.log(result);
    return 그랜저();
}).then((result)=>{
    console.log(result);
})

 

 

 

return 에 대해 

 

function sum(a,b){
    return a+b;
}

let a = sum(1,2); //sum의 결과값 3

 

 

아반떼 -> 반환값을 return 할 거야. promise는 무조건 object -> 

아반떼 함수 실행하면 -> object 형태의 반환값를 return 

 

 

아반떼().then((result)=>{ // promise object 결과값 then -이행되었을 때 실행됨
    console.log(result);
    return 소나타 ();   //소나타 함수를 실행 // 소나타를 실행한다. 결과값을 끝 })으로 옮긴다.
}).then((result)=>{ //소나타가 완료되면 .then을 또 반복한다 .
    console.log(result);
    return 그랜저();
}).then((result)=>{
    console.log(result);
})
//promise 를 반환해서 또 다른promise를 넣고 반복 = promise chain

 

-=> 실행되는데 6초 걸림 console.time();

 

아반떼().then((result)=>{ // promise object 결과값 then -이행되었을 때 fulfilled실행됨
    console.log(result);
    return 소나타 ();   //소나타 함수를 실행 // 소나타를 실행한다. 결과값을 끝 })으로 옮긴다.
}).then((result)=>{ //소나타가 완료되면 .then을 또 반복한다 .
    console.log(result);
    return 그랜저();
}).then((result)=>{
    console.log(result);
}).catch((error)=>{    // reject (위에서 한개라도 실패하면 바로 error로 넘어옴)
    console.log(error);
}).finally(()=>{  //위에서부터 아래까지 ㄷ ㅏ 끝나면 무조건 마지막에 요걸 실행해! 
    console.log('the end')
})

 

 

 

소나타를 실패로 바꿔보고 다시 실행 

const 소나타 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //resolve('소나타 go!');
            reject('error');
        },2000)
    })
}

-> 아반떼 실행, 소나타 부터 실행 x , catch에서 오류 잡고 -> finally 로 끝 

 

 

 

소나타 다시 resolve로 바꿔서 console.time 찍기 

const 아반떼 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 go!');
        },3000)
    })
}

const 소나타 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 go!');
            //reject('error');
        },2000)
    })
}

const 그랜저 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 go!');
        },1000)
    })
}

console.time('x');

아반떼().then((result)=>{ // promise object 결과값 then -이행되었을 때 fulfilled실행됨
    console.log(result);
    return 소나타 ();   //소나타 함수를 실행 // 소나타를 실행한다. 결과값을 끝 })으로 옮긴다.
}).then((result)=>{ //소나타가 완료되면 .then을 또 반복한다 .
    console.log(result);
    return 그랜저();
}).then((result)=>{
    console.log(result);
}).catch((error)=>{    // reject (위에서 한개라도 실패하면 바로 error로 넘어옴)
    console.log(error);
}).finally(()=>{  //위에서부터 아래까지 ㄷ ㅏ 끝나면 무조건 마지막에 요걸 실행해! 
    console.log('the end')
    console.timeEnd('x');
})
//time x 부터 x까지 걸린 시간 

///-------finall함수----------// 끝났을 때 사용하는것

 

 

 

Chain 단점 : 하나의 결과값만 가지고 싶은데 하나하나 계속 해야야나 

-> 한번에 처리하는 법 = promise all

 

 

promise 에 all, race, reject, resolve () 를 쓸 수 있다. 

const 아반떼 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 go!');
        },3000)
    })
}

const 소나타 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 go!');
            //reject('error');
        },2000)
    })
}

const 그랜저 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 go!');
        },1000)
    })
}

//Promise all 인자값 -> Array 배열 <-안에 값 우리가 promise 못들음
// 상태값이 3개가 전부다 이행이 완료가 되었을 때

Promise.all([아반떼(),소나타(),그랜저()]).then((result)=>{
    console.log(result);
})

 

 

console.time찍기 

console.time('x');
Promise.all([아반떼(),소나타(),그랜저()]).then((result)=>{
    console.log(result);
    console.timeEnd('x');
})

동시에 해야하면 배열에 담고 이렇게 한번에 처리할 수 있음. 

 

=========================Promise Chain & Promise All ==============================

 

익명함수 변수 생성 

const 아반떼 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 고고');
        },3000)
    })
}
const 소나타 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 고고');
        },2000)
    })
}
const 그랜저 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 고고');
        },1000)
    })
}

promise chain

console.time('x');

아반떼().then((result)=>{
    console.log(result);
    return 소나타();
}).then((result)=>{
    console.log(result);
    return 그랜저();
}).then ((result)=>{
    console.log(result);
}).catch((error)=>{
    console.log(error);
}).finally(()=>{
    console.log('The end');
    console.timeEnd('x');
})

promise all

console.time('x');
Promise.all([아반떼(),소나타(),그랜저()]).then((result)=>{
    console.log(result);
    console.timeEnd('x');
})

 

 

 

--------------------------------------------------예외 처리문 try...catch----------------------------------------------

 

 try catch 

 

try.... catch..아련...

 

//---------------------try and catch 예외처리문-------------//

try{

  내가 실행할 코드
  
}catch(e){

  코드에 에러가 발생되면 여기에 실행할 코드 
  
}

 

예외처리문 기본 (e = err = error)

 

 

에러 없는 상태 

try{   // code 실행하는 부분 / 에러를 만나면 아래로 떨어져 ! 
    let a = 'helloooo';
    console.log(a);
}catch(e){
    console.log(e);
}

결과 // helloooo

 

let = 변수의 선언. 한번만 쓸 수 있음 두번 일부로 써서 에러를 내보자

try{   // code 실행하는 부분 / 에러를 만나면 아래로 떨어져 ! 
    let a = 'helloooo';
    let a = 'therreee';
    console.log(a);
}catch(e){
    console.log(e);
}

 

결과 //  Identifier 'a' has already been declared 오류 메세지 나옴

 

-> 아 이거는 JAVA 기준... 

 

JS 기준으로 다시 ===> 

 

 

 

throw 다시 공부 

throw 오류를 발생시켜서 이 구문을 밖으로 나가겠다. 

undefined 가 뜨면 함수 밖으로 이동시키기 . 

try{ 
    let a = 'helloooo';
    throw "test"; //나여기서 에러야!@ "test"라고 보내기 
    // throw 뒤에 글자를 입력하면 
    console.log(a);
}catch(e){
    console.log(e);
}

try{   //1.번
    let a = 'helloooo';
    throw a; 

}catch(e){
    console.log(e);
}

throw 에러발생하면 객체 담아서 내리면 ?

 

 

 

 

 

 

------게시판에서도 쓸 수 있음

if(req.query.idx==undefined) throw a; => 요것도 가능 if 문 only

console.log 실행해봐 

 

 

결과 = hello world

 

 

 

--------약간 혼동옴..

 

 

함수 안에서 try, catch 문 만들어보기 

function f(){
    try{
        console.log(0);
        throw "error";
    }catch(e){
        console.log(1);
        return true;
    }
}

-> 무조건 error 가 나게 만듬. 

결과값 -> true

console창에 f(); 입력

 

 

function f(){
    try{
        console.log(0);
        throw "error";
    }catch(e){
        console.log(1);
        return false;
    }
}

결과 = false

function f(){
    try{
        console.log(0);
        throw "error";
    }catch(e){
        console.log(1);
        return 3;
    }
}

결과 = 3

 

 

 

function f(){
    try{
        console.log(0);
        throw "error";
    }catch(e){
        console.log(1);
        return true;
    }finally{
        console.log('The end')
    }
}

console.log 

 

 

function f(){
    try{
        console.log(0);
        throw "error";
    }catch(e){
        console.log(1);
        return true;
    }finally{
        console.log('The end')
        return true;
    }
}

결과 0,1,the end, true;

function f(){
    try{
        console.log(0);
        throw "error";
    }catch(e){
        console.log(1);
        return true;
    }finally{
        console.log('The end')
        return false;
    }
}

결과 0,1,the end, false;

 

 

 

throw [내용] 

내용 - String, Array, Object 모든 객체가 다 들어감. 

얘를 쓰게되는 순간 함수든 if문이든 try {} 에러를 발생시키고 나감. try 문 종료 -> catch 문으로 감 이제  

 

function f(){
    try{
        console.log(0);
        console.log('오니?1');
        throw "error";
        console.log('오니?2');  //안먹힘 
    }catch(e){
        console.log(1);
        return true;
    }finally{
        console.log('The end')
        return false;
    }
}

 

 

 

 

throw [내용] 어디로 가는지 

 

 

아래 console.log창 모두 확인 해보기 ! 

let req = undefined;
try{
    if(req==undefined) throw 'error 입니ㅏ다';
    console.log('hello world');
}catch(e){
    console.log(e);
}

 

finally는 결과값 상관없이 모두 실행됨. 

let req = undefined;
try{
    if(req==undefined) throw 'error 입니ㅏ다';
    console.log('hello world');
}catch(e){
    console.log(e);
}finally{
    console.log('end');
}
let req = 1
try{
    if(req==undefined) throw 'error 입니ㅏ다';
    console.log('hello world');
}catch(e){
    console.log(e);
}finally{
    console.log('end');
}

 

 

 

 

//------------------------------------------------------async--------------------------------------------------//

 

 

 async 

async의 탄생 스토리..

 

요 두가지는 비슷했음 비동기로 처리 

콜백함수 편하게 하려고 promise 나왔는데 -> 생각보다 가독성이 떨어진다해서 -> 비동기를 처리하기위해 async 라는게 또 나옴  to solve callback HELL..... 

 

 

구문 시작 방법 . 

함수 앞에 async 쓰기 

async function 자동자(){
    return "아반떼";
}

 

return 값이 promise 객체 값으로 줌. 코드의 수를 줄였다. 

 

promise 객체여서 then 을 쓸 수 있다. -> promise 안의 객체 값으로 옴 

쳌쳌

async function 자동자(){
    return "아반떼";
}

자동차().then(result=>{
    console.log(result);
}

 

 

return 값을 마음대로 만들어보기 

async function 자동차(name){  //실패할 수 없는 함수가 만들어짐 
    return name;
}

자동차('아반떼').then(result=>{
    console.log(result);
}

ㅇconsole.log

자동차

자동차()

자동차('아반떼'); 다 입력해보기 

 

1. 반환값이 promise 객체로 나옴 

promise(state: ? , result: ?) 요렇게 

return 안에 있는 값들은promise객체 안에 있는 result 값 안에 들어가게 됨. 

 

 

 

-> 실패한것도 한번에 넣을 수 있는 방법 > console.dir(promise)를 찾아보면 

강제로 자동차 reject를 만듬 

async function 자동차(name){
    return Promise.reject(name);
}

자동차('아반떼').then(result=>{
    console.log(result);
}

ㅇㅣ 상태에서 아래부분만 추가, 수정해서 에러 안뜨게 내용 출력되게 만들기

 

 

async function 자동차(name){
    return Promise.reject(name);
}

자동차('아반떼').catch(result=>{
    console.log(result);
})

이건가?? 

 

또는 이것도 가능 

async function 자동차(name){
    return Promise.reject(name);
}

자동차('아반떼').then(result=>{
    console.log(result);
}).catch(error=>{
    console.log(error);
})

 

 

Promise 객체 안에서 바로 사용가능할 수 있게끔 method 가 존재하기때문 

then, catch, finally  등등... 다 사용 가능 

async function 자동차(name){
    return Promise.reject(name);
}

자동차('아반떼').then(result=>{
    console.log(result);
}).catch(error=>{
    console.log(error);
}).finally(()=>{
    console.log('점심시간 3분전');
})

 

다음 시간await 배우고 끗 ! 

 

다 배우면 DB connection 모듈을 만들어서 사용해볼것

 

module  (컴퓨터언어로)

프로그램 내부를 기능별 단위로 분할한 부분. 또는, 메모리 보드 등의 부품을 간단하게 떼서 교환이 쉽도록 설계되어 있을 때의 그 각 구성 요소.

 

아하 그래서 router 

module.exports = router; 였나 보다..

 

 

------------------------------------------------- 점 심 ㅅ  ㅣ 간이 ㄷ ㅏ ~~~~~~-------------------------------------

 

오늘의 메 뉴 : 새우 볶금밥 

 

 

 

AWAIT

 

await  = promise의 사용법의 변화만 있을 분 개념은 같음 

 

function 자동차(name){
    return new Promise((resolve,result)=>{
        setTimeout(()=>{
            resolve(name);
        },3000)
    })
}

 

 

 

function 자동차(name){
    return new Promise((resolve,result)=>{
        setTimeout(()=>{
            resolve(name);
        },3000)
    })
}

//기존의 방법promise 객체 사용법이었다. 
자동차.('아반떼').then((result)=>{  //콜백
    console.log(result);
})

10개를 만들려고 하면 이걸 10개 .then ~ .then~ 계속 반복해야함 

function 자동차(name){
    return new Promise((resolve,result)=>{
        setTimeout(()=>{
            resolve(name);
        },3000)
    })
}

//async 에서만 함수 선언 안에서만 await 를 사용할 수 있다. 
async function 자동차리스트(){
    const carName await 자동차('아반떼');
    console.log(carName);     //console.log가 3초 후에 찍혔다. (11번 줄에서 12줄까지 걸린 시간)
}

//함수 선언 (사용) 하기 

자동차리스트();

await - resolve가 생성될때까지 기다리다가 완료되면 result 에 완료된 값을 넣어줘라 //값 : promise object안에 있는 result 값을 

동기처럼 코드가 보이도록 

then을 사용하는 귀차니즘을 await으로 .쉽게 

 

 

쓰는 이유? 

 

function 자동차(name){
    return new Promise((resolve,result)=>{
        setTimeout(()=>{
            resolve(name);
        },3000)
    })
}

//기존의 방법promise 객체 사용법이었다. 
자동차.('아반떼').then((result)=>{
    console.log(result);
})

//async 에서만 함수 선언 안에서만 await 를 사용할 수 있다. 
async function 자동차리스트(){
    const result = await 자동차('아반떼');  //3초 기다렸다가 실행함. 
    console.log(result);
}

//함수 선언 (사용) 하기 

자동차리스트();


function 자동차리스트2(){      //동기로 처리되고 있는 중 / 함수 호출하면 바로 실행됨 
    const carName = 자동차('아반떼');   //3초뒤에 값을 얻음. 근데 동기방식은 어 결과없네 하고undefined넣음 
    console.log(carName);   // 
}

자동차 리스트2 의 경우 - 바로 찍힘 (3초 안필요) 

 

 

값이 undefined 된 이유 = 값이 처리되기도 전에 undefined해놓고 아래 처리함. 

 

then 귀찮은걸 아래처럼 쓸 수 있음. 

 

function 자동차(name){
    return new Promise((resolve,result)=>{
        setTimeout(()=>{
            resolve(name);
        },3000)
    })
}


//async 에서만 함수 선언 안에서만 await 를 사용할 수 있다. 
async function 자동차리스트(){
    const carName = await 자동차('아반떼');     //요런방식으로 콜백에서 벗어날수잇
    console.log(carName);
    const carName2= await 자동차('소나타');
    console.log(carName2);
    const carName3= await 자동차('그랜저');
    console.log(carName3);
}

자동차리스트();


function 자동차리스트2(){
    const carName = 자동차('아반떼');  //실행부터 하고 3초 후에결과값 가져옴 
    console.log(carName);
}


자동차리스트2(); // 요 값 하나하나 분석해보기

 

이게 가능해지고 나서 express가 각광받기 시작함

 

---------------------------------------------------------------------------------

let a;
setTimeout(()=>{
    a =10; 
},3000);

console.log(a);

console.log는 한줄 ~ 한줄 ~ 처리됨 

 

a 가 있구나 

setTimeout  a= 10; 3초 뒤에

console.log(a) // 3 바로 나왔다. 

 

결과 : undefined 

a 값이 10 이 되기 전 (3초 후 ) a값을 찍어야하는데 값이 안정해졌으니 undefined 

 

 

function 자동차리스트2(){
    const carName = 자동차('아반떼');  //실행부터 하고 3초 후에결과값 가져옴 
    console.log(carName);
}

 

요 코드와 위의 a 코드는 비슷 

 

 

async function 자동차리스트(){
    const carName = await 자동차('아반떼');
    console.log(carName);
}

async await 을 쓰면 3초를 기다리고 실행해줌. 

3초 뒤 '아반떼' 출력됨 

 

 

db connection 도 promise....가능하다고 하는데 감이 안잡히는군.... 

 

 

 

 

다음주 

씨컬라이즈(클래스, 비동기) 74p ~78p 

 

 

 

git 사용 언넝 해봐야하는데.... 

 

 

읽어볼 것

velog.io/@bathingape/Promise

 

비동기 처리와 콜백함수 그리고 Promise

image.png 1. 비동기 처리 비동기 처리라 함은 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다. 1-1. Ajax 화면에 표시할 이미지나 데

velog.io

 

 

오늘 한 코드 전체 

try{
    let a = 10;
    let a = 30; 
    console.log("hello");
} catch(e){
    console.log(e);
}



----------비동기 예시-----------//
console.log('start1');
setTimeout(()=>{
    console.log('start2');
}, 3000);
console.log('start3');


-----------콜백함수 (아직 내용은 안들어가 있음. 단계별)------------//

function go(){
    console.log('Go Go GO!')
}

const 아반떼 = (callback) =>{  
    setTimeout(()=>{
        console.log('아반떼 go');
        callback();
    }, 3000);
}

const 소나타 = (callback) =>{
    setTimeout(()=>{
        console.log('소나타 go');
        callback();
    }, 1000)
}

const 그랜저 = (callback) =>{
    setTimeout(()=>{
        console.log('그랜저 go');
        callback();
    },2000)
}

console.log('------start-----');
아반떼(()=>{
    소나타(()=>{
        그랜저(()=>{
            console.log('---자동차 경주 끗---');
        })
    })
})

promise code frame 

const pr = new Promise( (resove,reject)=>{
    //code block
    setTimeout(()=>{
        resolve('성공!');   // 요 value 값은 result 값으로 들어감 
        reject('실패');
    },3000)
})

const pr = new Promise ( (resolve, reject)=>{
    setTimeout( () =>{
        reject('error!');
    }, 3000)
})


//then의 인자값 callback함수 들어감 
//첫번재 인자값 에는 new 객체의 result 값을 반환함. ** 중요 ** 
// result라는 반환받을 변수명을 지정해줌. 
//어떨 때 실행 되는지 -> state 값이 fulfilled 일 때 이행되었을 때 
pr.then((result)=>{   
    console.log(result);
}).catch ( (error)=>{ //첫번재 인자값 - 쓰고 싶은 인자값명 
    console.log(error);
})

const 아반떼 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 go!');
        },3000)
    })
}

const 소나타 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 go!');
            //reject('error');
        },2000)
    })
}

const 그랜저 = () =>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 go!');
        },1000)
    })
}

console.time('x');

아반떼().then((result)=>{ // promise object 결과값 then -이행되었을 때 fulfilled실행됨
    console.log(result);
    return 소나타 ();   //소나타 함수를 실행 // 소나타를 실행한다. 결과값을 끝 })으로 옮긴다.
}).then((result)=>{ //소나타가 완료되면 .then을 또 반복한다 .
    console.log(result);
    return 그랜저();
}).then((result)=>{
    console.log(result);
}).catch((error)=>{    // reject (위에서 한개라도 실패하면 바로 error로 넘어옴)
    console.log(error);
}).finally(()=>{  //위에서부터 아래까지 ㄷ ㅏ 끝나면 무조건 마지막에 요걸 실행해! 
    console.log('the end')
    console.timeEnd('x');
})
time x 부터 x까지 걸린 시간 

/-------finall함수----------// 끝났을 때 사용하는것 


Promise all 인자값 -> Array 배열 <-안에 값 우리가 promise 못들음
상태값이 3개가 전부다 이행이 완료가 되었을 때
console.time('x');
Promise.all([아반떼(),소나타(),그랜저()]).then((result)=>{
    console.log(result);
    console.timeEnd('x');
})
//결과값 type = array 결과값 안에 [resolve, resolve] 객체로 표현될수도(우리가 넣은 값에 따라)


const 아반떼 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('아반떼 고고');
        },3000)
    })
}
const 소나타 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('소나타 고고');
        },2000)
    })
}
const 그랜저 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('그랜저 고고');
        },1000)
    })
}
console.time('x');
Promise.all([아반떼(),소나타(),그랜저()]).then((result)=>{
    console.log(result);
    console.timeEnd('x');
})

console.time('x');

아반떼().then((result)=>{
    console.log(result);
    return 소나타();
}).then((result)=>{
    console.log(result);
    return 그랜저();
}).then ((result)=>{
    console.log(result);
}).catch((error)=>{
    console.log(error);
}).finally(()=>{
    console.log('The end');
    console.timeEnd('x');
})

---------------------try and catch 예외처리문-------------//

try{   //1.번
    let a = 'helloooo';
    throw a; 

}catch(e){
    console.log(e);
}


function f(){
    try{
        console.log(0);
        console.log('오니?');
        throw "error";
        console.log('오니?');
    }catch(e){
        console.log(1);
        return true;
    }finally{
        console.log('The end')
        return false;
    }
}

let req = undefined;
try{
    if(req==undefined) throw 'error 입니ㅏ다';
    console.log('hello world');
}catch(e){
    console.log(e);
}finally{
    console.log('end');
}


-------------------async-----------------//


async function 자동차(name){
    return Promise.reject(name);
}

자동차('아반떼').then(result=>{
    console.log(result);
}).catch(error=>{
    console.log(error);
}).finally(()=>{
    console.log('점심시간 3분전');
})


function 자동차(name){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(name);
        },3000)
    })
}

기존의 방법promise 객체 사용법이었다. 
자동차.('아반떼').then((result)=>{
    console.log(result);
})

async 에서만 함수 선언 안에서만 await 를 사용할 수 있다. 
async function 자동차리스트(){
    const carName = await 자동차('아반떼');
    console.log(carName);
    const carName2= await 자동차('소나타');
    console.log(carName2);
    const carName3= await 자동차('그랜저');
    console.log(carName3);
}

함수 선언 (사용) 하기 

자동차리스트2();

function 자동차리스트2(){
    const carName = 자동차('아반떼');
    console.log(carName);
}

let a;
setTimeout(()=>{
    a =10; 
},3000);

console.log(a);
반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[35일차 복습 및 정리] JavaScript Promise 란? 사용법 / Promise.all / .then .catch .finally 정리  (0) 2021.05.02
[35일차 복습 및 정리] JavaScript try... catch... finally 란? 사용법, 특징, 예외처리, throw도 함께 써보기 연습  (0) 2021.05.01
[34일차 복습 및 정리] node.js proto prototype 이란 ? __proto__ / Prototype Object 분석  (0) 2021.04.30
[34일차] 20210429 proto prototype Object etc  (0) 2021.04.29
[33일차 복습 및 정리] node.js connection pool 이란? 노드 제이에스 커넥션 사용법  (0) 2021.04.28

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바