JavaScript에서 동기식 HTTP 요청을 만드는 방법은 무엇입니까?

현재 디지털 환경에서 HTTP 요청 행위는 클라이언트와 서버 간 데이터 송수신에 있어 필수적인 부분입니다. 비동기식 요청은 비차단 경험을 제공하여 궁극적으로 전반적인 사용자 경험을 향상시키기 때문에 대중화되었습니다. 그러나 어떤 경우에는 동기식 HTTP 요청이 필요하거나 바람직할 수도 있습니다. 다음 설명에서는 JavaScript를 사용하여 동기식 HTTP 요청을 생성하는 알고리즘을 자세히 살펴보겠습니다. 또한 두 가지 서로 다른 접근 방식과 해당 코드 설명 및 실제 적용을 살펴보겠습니다.

알고리즘

JavaScript에서 동기식 HTTP 요청을 만들려면 후속 단계를 포함하는 기본 알고리즘을 실행해야 합니다. -

• 먼저 HTTP 요청 객체 생성 예시입니다.

• 두 번째, 방법론인 URL(Uniform Resource Locator)을 지정하고 요청 동기화 모드를 활성화하여 요청을 조정합니다.

• 셋째, 요청을 보냅니다.

• 넷째, 답변을 기다립니다.

• 마지막으로 이에 따라 응답을 처리합니다.

방법

XMLHttpRequest 사용하기

XMLHttpRequest는 꽤 오랫동안 사용되어 온 JavaScript의 기존 객체입니다. 현대적인 대안으로 대체되었지만 여전히 동기식 HTTP 요청을 매우 잘 수행합니다. XMLHttpRequest를 구현하는 방법에 대한 지침은 다음과 같습니다. -

으아아아

이 예에서는 먼저 새 XMLHttpRequest 인스턴스를 만듭니다. 다음으로 open() 메서드를 호출하여 요청을 구성합니다. 첫 번째 매개변수는 HTTP 메서드(GET)이고, 두 번째 매개변수는 URL이며, 세 번째 매개변수는 요청이 비동기식이어야 하는지 여부를 나타내는 부울 값입니다(동기식 요청의 경우 false). 마지막으로 send() 메소드를 사용하여 요청을 보내고 응답을 기다립니다. 상태가 200(정상)이면 응답 텍스트를 반환하고, 그렇지 않으면 오류가 발생합니다.

예

앞서 정의한 synchronousRequest 함수를 사용하세요 -

으아아아

이 예에서는 프로토타입 URL을 사용하여 synchronousRequest 함수를 호출합니다. 요청이 성공하면 응답 정보를 콘솔에 기록합니다. 그러나 실패하면 콘솔에 오류 메시지를 기록합니다.

Get API 사용

Fetch API는 XMLHttpRequest를 현대적으로 대체하여 더욱 유연하고 사용하기 쉽도록 설계되었습니다. 안타깝게도 기본 fetch() 함수는 동기 요청을 지원하지 않습니다. 그러나 async/await를 사용하여 동기화와 유사한 동작을 만들 수 있습니다 -

으아아아

이 예에서는 fetch() 함수를 사용하여 Promise를 제공합니다. 다음 코드 줄을 계속 진행하기 전에 Promise가 끝날 때까지 실행을 일시 중지하기 위해 wait 키워드를 사용합니다. 응답이 만족스러우면 응답 텍스트를 검색하고, 그렇지 않으면 오류를 발생시킵니다.

예

앞서 정의한 synchronousFetch 함수를 사용하세요 -

으아아아

출력

으아아아

이 예에서는 wait 키워드를 올바르게 처리하기 위해 비동기 함수에서 synchronousFetch 함수를 호출합니다. 이전 예와 마찬가지로 요청이 성공하면 응답 데이터를 콘솔에 기록하고, 그렇지 않으면 오류 메시지가 기록됩니다.

결론

비차단 특성으로 인해 비동기 요청이 선호되는 경우가 많지만 JavaScript의 동기 HTTP 요청에는 여전히 사용 사례가 있습니다. 우리는 동기식 HTTP 요청을 만들기 위한 알고리즘에 대해 논의하고 이전 XMLHttpRequest 메서드와 async/await를 사용하는 보다 현대적인 Fetch API를 포함한 두 가지 다른 접근 방식을 탐색했습니다. 동기 요청은 JavaScript 코드 실행을 차단하고 사용자 경험에 부정적인 영향을 미칠 수 있으므로 주의해서 사용해야 합니다.

위 내용은 JavaScript에서 동기식 HTTP 요청을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!