자바스크립트는 서버를 요청하고 응답을 기다립니다.

웹 애플리케이션 개발에서는 서버에서 데이터를 가져온 다음 이를 클라이언트에 표시해야 하는 경우가 많습니다. JavaScript는 현대 웹 개발에서 가장 널리 사용되는 언어 중 하나이며, 클라이언트에서 JavaScript를 사용하여 서버에 요청하고 응답을 기다리는 것이 일반적인 작업입니다. 이 문서에서는 JavaScript를 사용하여 HTTP 요청을 보내고 서버의 응답을 기다리는 방법을 설명합니다.

1. HTTP 요청 보내기

XMLHttpRequest 개체는 JavaScript에서 HTTP 요청을 보내는 데 사용됩니다. XMLHttpRequest 객체는 최신 웹 애플리케이션에서 가장 일반적으로 사용되는 비동기 데이터 교환 기술입니다. 이를 통해 JavaScript에서 비동기 요청을 생성하고 서버와 상호 작용할 수 있습니다. 다음은 간단한 예입니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

위 코드는 GET 메서드를 사용하여 http://localhost:8080/data 엔드포인트에서 데이터를 요청합니다. send() 메소드가 호출되면 요청이 서버로 전송됩니다. 이 메서드는 비동기식이므로 후속 코드 실행을 차단하지 않습니다.

2. 서버 응답을 기다리는 중

요청을 보낸 후 서버가 응답할 때까지 기다려야 합니다. 리스너를 사용하여 응답을 처리할 수 있습니다. 다음은 간단한 예입니다.

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Error occurred');
    }
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

위의 코드는 서버에 요청을 보내고 서버가 응답할 때 응답을 처리합니다. 애플리케이션이 응답을 받으면 로드 이벤트 리스너가 실행됩니다. 응답 상태가 200이면 응답을 콘솔에 인쇄합니다. 그렇지 않으면 오류 메시지가 출력됩니다.

3. Promise를 사용하여 비동기 요청 처리

위의 예에서는 콜백 함수를 사용하여 서버 응답을 처리합니다. 그러나 콜백 함수는 중첩되고 혼란스러운 코드로 이어질 수 있으므로 Promise를 사용하여 비동기 요청을 처리할 수 있습니다. 다음은 Promise를 사용하여 비동기 요청을 처리하는 예입니다.

function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send();
    });
}

위 코드에서 makeRequest 함수는 HTTP 메소드와 URL을 매개변수로 받아들이고 Promise 객체를 반환합니다. 이 개체에는 해결 및 거부라는 두 가지 처리기 함수가 있습니다. 서버가 성공적으로 응답하면 해결 핸들러 함수는 응답을 콘솔에 인쇄합니다. 오류가 발생하면 거부 처리기 기능이 오류 메시지를 출력합니다.

함수 사용 방법은 다음과 같습니다.

makeRequest('GET', 'http://localhost:8080/data')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.error(error);
    });

위 코드는 HTTP GET 요청을 만들고 처리가 성공하거나 실패하면 핸들러 함수를 호출합니다. Promise 스타일을 사용하여 비동기 코드를 작성하는 것은 콜백 함수를 사용하는 것보다 이해하고 유지 관리하기가 더 쉽습니다.

결론

JavaScript를 사용하여 HTTP 요청을 보내고 서버 응답을 기다리는 것은 웹 애플리케이션에서 필수 기술입니다. JavaScript는 이 작업을 처리하기 위해 XMLHttpRequest 개체를 제공하며 개발자가 코드를 단순화하기 위해 타사 라이브러리를 사용하는 것을 제한하지 않습니다. 이 기사에서는 기본 JavaScript를 사용하여 HTTP 요청을 보내고 서버 응답을 기다리는 예제를 소개하고 Promise 스타일을 사용하여 비동기 코드를 작성하는 방법을 보여줍니다.

위 내용은 자바스크립트는 서버를 요청하고 응답을 기다립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!