다음은 JavaScript에서 HTTP 요청을 만드는 가장 일반적인 방법입니다.

프로그램 작성

JavaScript에는 서버 측 리소스에서 데이터를 보내거나받는 데 사용할 수있는 HTTP 요청을 만드는 훌륭한 모듈과 메서드가 있습니다. 이 기사에서는 JavaScript에서 HTTP 요청을 만드는 몇 가지 인기있는 방법을 살펴볼 것입니다.

아약스

Ajax는 비동기 HTTP 요청을 만드는 전통적인 방법입니다. 데이터는 HTTP POST 메서드를 사용하여 보내고 HTTP GET 메서드를 사용하여받을 수 있습니다. 살펴보고 GET요청을 합시다 . JSON 형식으로 임의의 데이터를 반환하는 개발자를위한 무료 온라인 REST API 인 JSONPlaceholder를 사용할 것입니다.

Ajax에서 HTTP 호출을 수행하려면 새 XMLHttpRequest()메소드 를 초기화 하고 URL 엔드 포인트 및 HTTP 메소드 (이 경우 GET)를 지정해야합니다. 마지막으로이 open()메서드를 사용하여 HTTP 메서드와 URL 끝점을 함께 연결하고 send()메서드를 호출 하여 요청을 시작합니다.

이벤트가 XMLHTTPRequest.onreadystatechange시작될 때 호출 할 이벤트 핸들러가 포함 된 속성을 사용하여 HTTP 응답을 콘솔에 기록합니다 readystatechanged.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

브라우저 콘솔을 보면 JSON 형식의 데이터 배열이 반환됩니다. 그러나 요청이 완료되었는지 어떻게 알 수 있습니까? 즉, Ajax로 응답을 처리하는 방법은 무엇입니까?

onreadystatechange속성은 두 가지 방법이있다, readyState그리고 status이는 우리가 요청의 상태를 확인 할 수 있습니다.

경우 readyStateIS 4와 동일한,이 요청이 완료 의미한다. 이 readyState숙박 시설에는 5 개의 답변이 있습니다. 여기에서 자세히 알아보세요.

JavaScript를 사용하여 Ajax를 직접 호출하는 것 외에도 $.AjaxjQuery 메소드 와 같은 HTTP 호출을 수행하는 다른 더 강력한 메소드가 있습니다. 지금 논의하겠습니다.

jQuery 메서드

jQuery에는 HTTP 요청을 쉽게 처리 할 수있는 많은 방법이 있습니다. 이러한 메서드를 사용하려면 프로젝트에 jQuery 라이브러리를 포함해야합니다.

$ .ajax

jQuery Ajax는 HTTP 호출을 수행하는 가장 간단한 방법 중 하나입니다.

$ .ajax 메소드는 많은 매개 변수를 취하며, 그중 일부는 필수이고 나머지는 선택 사항입니다. 여기에는 두 개의 콜백 옵션이 success있으며 error수신 된 응답을 처리합니다.

$ .get 메서드

$ .get 메소드는 GET 요청을 실행하는 데 사용됩니다. 두 개의 매개 변수, 즉 엔드 포인트와 콜백 함수가 필요합니다.

$ .post

이 $.post방법은 데이터를 서버에 게시하는 또 다른 방법입니다. 세 개의 매개 변수 url, 즉, 게시 할 데이터 및 콜백 함수가 필요합니다.

$ .getJSON

이 $.getJSON메서드는 JSON 형식의 데이터 만 검색합니다. 두 개의 매개 변수, url및 콜백 함수를 사용합니다.

jQuery에는 원격 서버에 데이터를 요청하거나 게시하는 이러한 모든 메서드가 있습니다. 그러나 실제로 이러한 모든 메서드를 하나에 넣을 수 $.ajax있습니다. 아래 예제와 같이 메서드입니다.

술책

fetch비동기 요청을 할 수있는 새롭고 강력한 웹 API입니다. 사실, fetchHTTP 요청을 만드는 가장 좋은 방법 중 하나입니다. ES6의 뛰어난 기능 중 하나 인“Promise”를 반환합니다.ES6에 익숙하지 않은 경우이 기사에서 읽을 수 있습니다. Promise를 사용하면 비동기 요청을 더 스마트하게 처리 할 수 ​​있습니다. fetch기술적 으로 어떻게 작동 하는지 살펴 보겠습니다 .

이 fetch함수는 하나의 필수 매개 변수 인 endpointURL을 사용합니다. 또한 아래 예와 같이 다른 선택적 매개 변수가 있습니다.

보시다시피, fetchHTTP 요청을 만드는 데 많은 이점이 있습니다. 여기에서 자세히 알아볼 수 있습니다. 또한 fetch에는 axios와 같은 서버 측과 요청을주고받을 수있는 다른 모듈과 플러그인이 있습니다.

Axios

Axios는 HTTP 요청을 만들기위한 오픈 소스 라이브러리이며 많은 훌륭한 기능을 제공합니다. 어떻게 작동하는지 살펴 보겠습니다.

용법:

먼저 Axios를 포함해야합니다. 프로젝트에 Axios를 포함하는 방법에는 두 가지가 있습니다.

먼저 npm을 사용할 수 있습니다.

npm install axios --save

그런 다음 가져와야합니다.

import axios from 'axios'

둘째, CDN을 사용하여 axios를 포함 할 수 있습니다.

axios로 요청하기 :

Axios의 사용하면 사용할 수 있습니다 GET및 POST서버에서 데이터를 검색하고 게시 할 수 있습니다.

가져 오기:

axios하나의 필수 매개 변수를 사용하고 두 번째 선택적 매개 변수도 사용할 수 있습니다. 이것은 일부 데이터를 간단한 쿼리로 사용합니다.

우편:

Axios는 "약속"을 반환합니다. 약속에 익숙하다면 약속이 여러 요청을 실행할 수 있다는 것을 알고있을 것입니다. axios로 동일한 작업을 수행하고 동시에 여러 요청을 실행할 수 있습니다.

Axios는 다른 많은 방법과 옵션을 지원합니다. 여기에서 살펴볼 수 있습니다.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

//import import { FetchdataService } from './fetchdata.service';

Finally, call the service and run it.

app.component.ts:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].