nodejs를 처음 접했을때,

당연히 새로운 것은

>>> 비동기.. 처리..? 였다. <<<

 

사실 왜이렇게 어려운 말을 쓰는지 모르겠는데,

그냥 위에서부터 한줄 한줄 처리하는 것이 아니라,

빨리 처리되는 것부터 처리하겠다는 것이다.

그러다보니, 서로 연결되어 있는 함수일 때,

error가 발생하게 되고.

내가 원하는 순서대로 처리되지 않는다는 문제가 발생하게 된다.

 

이럴때 쓰는 것이 callback 함수가 되는 것이다.

그런데, callback이 직관적으로 보이지 않으니 나타난 것이,

Promise가 생기게 된 것이고, 

더 나아가,

promise를 사용하는, async await 가 나타나게 된 것이다.

 

즉,

nodejs는 비동기 방식 

callback 함수 필요

promise 개념발생

aysnc await를 활용한 파이썬과 같이 위에서부터 처리하는 듯한 표현방식 출연

 

이 된 것이다.

 

진짜 이해안갔는데, 이제서야 이해됨..

 

 

1. 기본적인 함수 표현방식

같은 함수를 두가지 방식으로 적어봤다.

함수 두개는 같은 함수이다.

1
2
3
4
5
6
7
8
9
10
11
name = function(){
    var data = 100
    return data
    }
 
fucntion name(){
    var data = 100
    return data
    }
 
name()
cs

 

2. async await 표현방식

1
2
3
4
5
async function name(){
    let data = await 프로미스 객체를 반환하는 메서드명()
    console.log(data)
    return data
    }
cs

await를 사용하려면 function앞에 async를 붙여야 한다.

그냥 쉽게 생각하면 사실, console.log(data)에서 undefined가 출력될 수가 있는데,

그 위에 await를 통해,

변수 data가 모두 담아질 때까지 await(기다리고),

그 다음줄이 실행되는 것이다.

이러면 undefined로 출력되지 않고 내가 원하는 data가 출력될 것이다.

 

두번째로, await뒤에는 promise 객체를 반환하는 매서드명이 들어가야한다.

 

3. Promise 객체?

 

Promise객체를 반환하면, callback함수를 복잡하게 쓸필요가 없고,

좀 더, 직관적으로

형식 :    Promise객체.then().catch()  

promise객체를 통해 나온 데이터를 가지고,

resolve일 경우에는(에러없이 promise 실행완료),

그다음 함수는 then이 실행되고,

 

reject(promise가 제대로 실행안됨)일 경우에는,

error이므로 catch가 실행된다.

마치, try() catch() 같음..

 

axios로 예를 들어보겟다.

 

axios.get(url)

을 하면 해당 url에 get요청을 해서 반환되는 JSON과 같은 Object가 반환된다.

axios는 Promise 객체를 반환한다.

axios.get(url).then(function(response){ console.log(response) }.catch(function(err){ console.log(err) }

axios.get(url)
>>> axios 실행 : promise 객체를 반환하는 함수 

.then(function(response){ console.log(response) }
>>성공시(resolve시,) 반환된 객체를 response에 담고, 데이터 반환하는 함수

.catch(function(err){ console.log(err) }  
>> 실패시(reject시,) err출력

 

4. 결론 - axios를 활용해서 async await 함수를 만들어보자

1
2
3
4
5
6
7
8
9
10
use = async function(){
    let response;
    let data = await axios.get('url'// axios는 promise를 반환하는 메서드임(api get호출)
    data.then(function(res){     // promise객체는 .then().catch() 와 같이 직관적으로 다음함수 실행 가능
        response = JSON.stringify(res)
    })
    return response
}
 
console.log(use())
cs

이렇게 쓰면 되겠네요!!

promise와 aync await를 모두 활용하였습니다..

 

+ Recent posts