fetch API

GitHub - JakeChampion/fetch: A window.fetch JavaScript polyfill.

GitHub - JakeChampion/fetch: A window.fetch JavaScript polyfill.

 

서버 처리 시간이 오래 걸리는 경우에도 사용자에게 화면 대기 없이 반응성 있는 인터페이스를 제공하려면

비동기적인 처리 방식을 사용해야 합니다.

자바스크립트에서 비동기 호출을 수행하는 대표적인 방법으로는

   - AJAX (Asynchronous JavaScript and XML) 또는 최근에는

   - Fetch API를 사용하는 것이 있습니다.

 

아래는 간단한 예제로, JavaScript에서 Fetch API를 사용하여 서버 모듈을 호출하고, 서버 응답이 오는 동안에도 사용자에게 화면 대기 없이 다른 작업을 수행하는 방법을 보여줍니다.

 

        function callServerModule() {

            // 서버 모듈의 엔드포인트 URL

            const url = '/your-server-endpoint';

            // Fetch API를 사용하여 비동기 호출

            fetch(url)

                .then(response => {

                    if (!response.ok) {

                        throw new Error(`HTTP error! Status: ${response.status}`);

                    }

                    return response.json(); // 또는 response.text() 등

                })

                .then(data => {

                    // 서버 응답을 처리하는 로직을 여기에 작성

                    console.log('Server response:', data);

                })

                .catch(error => {

                    // 오류 처리 로직을 여기에 작성

                    console.error('Error:', error);

                });

            // 여기에서는 서버 응답을 기다리지 않고 다른 작업을 수행할 수 있음

            console.log('Other tasks while waiting for server response...');

        }

        // 함수 호출

        callServerModule();