IT's 우

[JavaScript, 카카오클라우드스쿨2기 3주차-1] Promise 본문

카카오 클라우드 스쿨 2기/frontend

[JavaScript, 카카오클라우드스쿨2기 3주차-1] Promise

디우 2022. 11. 14. 18:44
728x90

개념

  • JavaScript는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용
  • 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있음
  • ES6에서는 비동기 처리를 위한 또 다른 패턴으로 Promise를 도입
  • Promise는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음
CallBack Hall
비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬이 발생

 

Promise는 Promise 생성자 함수를 통해 인스턴스화하며 Promise 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise - ajax</title>

</head>

<body>
    <div id="result"></div>
    <div id="display"></div>
</body>
    <script>
        // DOM 찾아오기
        const result = document.getElementById("result");

        //JSON 객체를 받아서 문자열로 변환한 후 result에 출력
        // 함수
        const render = (content) => {
            // 자바스크립트 객체를 JSON 문자열로 변환
            // POST 방식에서 파라미터 만들 때 많이 이용
           // result.innerHTML = JSON.stringify(content);

            let res=content;
            for(doc of res){
                        display.innerHTML += "<h3>id: "+ doc.id +"</h3>";
                        display.innerHTML += "<h3>title: "+ doc.title +"</h3>";
                    }

           

        }

        //전송방식, url, 파라미터를 받아서 요청을 하는 함수
        const promiseajax = (method, url, payload) => {
            // resolve는 성공했을 때 호출될 함수 - then
            // reject는 실패했을 때 호출될 함수 - catch
            return new Promise((resolve, reject) => {
                const request = new XMLHttpRequest();
                request.open(method, url);
                request.setRequestHeader('Content-type', 'application/json');
                //파라미터를 전송할 때는
                //자바스크립트 객체를 문자열로 변환
                request.send(JSON.stringify(payload));
                request.addEventListener("load", () => { // 비동기 작업 수행 성공
                    resolve(request.response);
                });
                request.addEventListener("error", (e) => { // 비동기 작업 수행 실패
                    reject(new Error(request.status));
                });
            });
        }


        //실제 요청
        promiseajax("GET", "https://jsonplaceholder.typicode.com/posts")
            .then(JSON.parse).then(render, console.error);

    </script>
</body>

</html>

 

728x90
반응형

'카카오 클라우드 스쿨 2기 > frontend' 카테고리의 다른 글

[javascript] 깊은 복사, 얕은 복사  (0) 2022.12.08
[react] props, state, ref  (0) 2022.12.06
[HTML5, 3주차-2] 브라우저에 데이터 저장, Web Worker  (0) 2022.11.15
[HTML5, 3주차-2] Geo Location, 카카오맵 API, File API  (0) 2022.11.15
[JavaScript 카카오클라우드스쿨2기 3주차-1]데이터 표현 방법 Parsing, 프로젝트에서 모듈화, AJAX 실습, 웹 클라이언트에서 웹 서버에게 데이터를 전송하는 방법(GET, POST~), Promise, Fetch API  (0) 2022.11.14
'카카오 클라우드 스쿨 2기/frontend' Related Articles more