자바스크립트 fetch, then, catch [Promise] 응용하고

👩‍💻 자바스크립트 fetch, then, catch [Promise] 응용하고

안녕하세요 TriplexLab입니다.

오늘은 지난 시간에 했던 fetch함수 관해서 응용해보도록 하겠습니다 :)

하단에 지난시간에 다루었던 fetch함수 관한 글 링크 남겨 보겠습니다. 
관심 있는 분들은 보세요~

🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기

 

<script>
        (function(){
            function pick(menus) {
                console.log('Pick random menu!');
                const p = new Promise((resolve, reject) => {
                    if (menus.length === 0) {
                    reject(new Error('Need Candidates'));
                    } else {
                    setTimeout(() => {
                        const randomIdx = Math.floor(Math.random() * menus.length); // 배열에 있는 인덱스 번호를 랜덤으로 뽑아 randomIdx변수에 할당 합니다.
                        const selectedMenu = menus[randomIdx];
                        resolve(selectedMenu); //  fulfilled 상태일때 인자로 위에서 뽑은 랜덤의 값을 인자로 넣습니다.
                    }, 1000); // 시간이 걸리는 걸 시뮬레이션하기 위한 1초입니다.
                    }
                });
                return p;
            }

            function getRandomMenu() {
            return fetch('./test.json') //데이터가 서버에 있을경우 url정보를 넣어주세요.
                .then((response) => response.json())
                .then((result) => {
                const menus = result;
                return pick(menus); // ! random pick function
                });
            }

            getRandomMenu()
            .then((menu) => {
                console.log(`Today's lunch is ${menu.name} ~`);
            })
            .catch((error) => {
                console.log(error.message);
            })
            .finally(() => {
                console.log('Random Menu candidates change everyday');
            });
        })();
</script>

 

위에에 작성한 코드는 렌덤으로 메뉴를 선택하는 코드입니다.
다운받아서 test 해보세요 :)

랜덤 선택기.zip

0.00MB