앞선 아티클에서 HTML의 스크립트 태그에 axios.get을 사용해서 GET 요청을 보내는 예제를 살펴보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('https://www.zerocho.com/api/get')
.then( (result) => {
console.log(result);
console.log(result.data);
})
.catch( (error) => {
console.error(error);
});
</script>
</head>
<body>
</body>
</html>
프로미스를 충분히 학습하셨다면, 위 axios.get 내부에 new Promise가 선언되었다는 사실을 기억하실 겁니다. 프로미스는 중요한 개념이기 때문에, 이 then과 catch 사용과 관련해 기본 형식을 다시 한번 짚고 넘어가겠습니다.
2. Javascript ES2015 (6) - 프로미스 [1/5]
당연한 이야기이지만, Javascript와 Node에서는 비동기를 주로 사용하게 되고, 이벤트 리스너에서 콜백 함수에 대한 정의를 자주 쓰게 됩니다. 그러나, 이 콜백 함수들의 사용은 꽤나 코드를 복잡하
nozeroslope.tistory.com
const condition = true;
// true면 resolve, false면 reject
const promise = new Promise(
(resolve, reject) => {
if(condition){
resolve('SUCCESS parameter');
} else {
reject('FAILED parameter');
}
});
/*
기타 다른 동작들을 선언 가능한 영역
*/
promise
.then(
(message) => {
// 성공(resolve) 실행
console.log(message);
})
.catch(
(error) => {
// 실패(reject) 실행
console.error(error);
})
.finally(
() => {
// 무조건 실행
console.log('UNCONDITIONALLY');
});
/* 출력
SUCCESS parameter
UNCONDITIONALLY
*/
위와 같은 방식으로 axis.get 내부에 프로미스가 선언되어 있다는 사실을 확인할 수 있습니다. 즉, 프로미스 객체에서 선언된 resolve가 실행된다는 것은 우리가 보낸 요청에 대해서 서버가 답을 했다는 것이고, 파라미터 result.data에 서버의 응답이 저장되어 돌아오는 방식으로 작동한다는 것을 이해할 수 있습니다.
AJAX에서 프로미스를 사용하는 방식을 채택하였기 때문에, 앞서 배운 내용 중 async/await 방식으로도 코드를 변경할 수 있습니다. 그럼 당연히 async/awiat에 대한 이해는 잘 되어있는 상태인지, 복습이 필요하겠죠?
아래 아티클에서 기본 콜백 ~ 프로미스 ~ async/await로 구현한 예제를 다시 비교해보도록 하겠습니다.
2. Javascript ES2015 (7) - async/awiat [1/2]
async/await는 노드 7.6 버전부터(ES2017) 추가된 기능입니다. 노드와 같이 비동기 중심의 코드를 작성하는 데 있어서 코드를 간소화하는데 큰 도움을 주는 문법이죠. 우선은 기본적으로 프로미스를
nozeroslope.tistory.com
여기 예제에서는, 익명함수 형태이기 때문에 즉시 실행함수 형태로 작성했습니다. 위 예제 코드와 비교해보도록 합시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
(async () => {
try{
const result = await axios.get('https://www.zerocho.com/api/get');
console.log(result);
console.log(result.data); // {}
} catch (error) {
console.error(error);
}
}
)();
</script>
</head>
<body>
</body>
</html>
함수 명에서 알 수 있듯이, 위 호출 방식은 GET입니다. POST일 경우에는 두 번째 인수에 데이터를 넣어서 보내게 됩니다. 아래 예제를 참고하시기 바랍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
(async () => {
try{
const result = await axios.post('https://www.zerocho.com/api/post/json', {
name: 'zerocho',
birth: 1994,
});
console.log(result);
console.log(result.data);
} catch (error) {
console.error(error);
}
}
)();
</script>
</head>
<body>
</body>
</html>
다시 한번 강조하지만, 프로미스와 async/await 사용법을 지속적으로 반복 학습해야 이어지는 노드 관련 구현 기능을 순조롭게 공부할 수 있습니다. 이해가 안되면 몇 번이고 반복해서 학습하세요.
'Programming > Node.js' 카테고리의 다른 글
| 3. Front-end Javascript (3) - encode(decode)URIComponent (0) | 2024.03.09 |
|---|---|
| 3. Front-end Javascript (2) - FormData (0) | 2024.03.08 |
| 3. Front-end Javascript (1) - AJAX [1/2] (0) | 2024.03.06 |
| 2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [2/2] (6) | 2024.03.05 |
| 2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [1/2] (0) | 2024.03.04 |
