Jak złożyć żądanie HTTP w JavaScript

„Xmlhttprequest” I 'aportować()' to dwie potężne funkcje w JavaScript, które można użyć do wykonywania wywołań Ajax. XMLHTTPREQUEST (XHR) to starsza technologia, która istnieje od wczesnych dni sieci. Pozwala na składanie żądań HTTP od strony klienta i nadal jest szeroko używany. Tymczasem funkcja fetch () jest nowszym dodatkiem do JavaScript, który powoli przechodzi jako preferowany sposób na wykonywanie połączeń Ajax. Wykorzystuje obietnice, więc łatwiej jest pisać i debugować, a także obsługuje streaming i inne nowoczesne funkcje.

Zarówno xmlhttprequest, jak i fetch () są świetnymi narzędziami do wykonywania połączeń Ajax, ale Fetch () jest ogólnie uważany za lepszą opcję dla większości aplikacji. Więc jeśli szukasz sposobu na wykonywanie połączeń Ajax w JavaScript, spróbuj fetch (). Uważamy, że będziesz mile zaskoczony wynikami!

Złóż żądanie HTTP w JavaScript

Oto przykład używania Xmlhttprequest zrobić DOSTAWAĆ żądanie pobierania danych z zdalnego interfejsu API:

const xhr = nowy xmlhttprequest (); xhr.respeseType = „JSON”; xhr.onReadyStateChange = () => if (xhr.ReadyState === xmlhttprequest.Gotowe) konsola.Log (xhr.odpowiedź); xhr.Otwórz („get”, „https: // api.przykład.com/'); xhr.setrequestheader („autoryzacja”, „nosiciel” + api_key); xhr.wysłać();

123456789101112

const xhr = nowy xmlhttprequest (); xhr.respeseType = „JSON”; xhr.onReadyStateChange = () => if (xhr.ReadyState === xmlhttprequest.Gotowe) konsola.Log (xhr.odpowiedź); xhr.Otwórz („get”, „https: // api.przykład.com/'); xhr.setrequestheader („autoryzacja”, „nosiciel” + api_key); xhr.wysłać();

Oto przykład używania aportować() zrobić DOSTAWAĆ żądanie pobierania danych z zdalnego interfejsu API.

fetch ('https: // api.przykład.com/', nagłówki: „autoryzacja”: „nosiciel” + api_key)) .Następnie (odpowiedź => odpowiedź.JSON ()) .Następnie (dane => konsola.log (dane));

1234567

fetch ('https: // api.przykład.com/', nagłówki: „autoryzacja”: „nosiciel” + api_key)) .Następnie (odpowiedź => odpowiedź.JSON ()) .Następnie (dane => konsola.log (dane));

Oba przykłady zakładają, że masz zapisany klawisz API w zmiennej o nazwie API_KEY.

Możesz także użyć aportować() Aby składać inne rodzaje żądań HTTP, takie jak POST, UMIEŚCIĆ, I USUWAĆ, Przekazując obiekt opcji jako drugi argument. Na przykład:

fetch ('/url', Method: 'Post', Body: Json.stringify (name: „John”, wiek: 30,), nagłówki: 'content-type': 'Application/Json',,);

12345678910

fetch ('/url', Method: 'Post', Body: Json.stringify (name: „John”, wiek: 30,), nagłówki: 'content-type': 'Application/Json',,);

Zauważ, że „Xmlhttprequest” I 'aportować()' są asynchroniczne, co oznacza, że ​​kod nie blokuje się podczas składania żądania. Zamiast tego odpowiedź zostanie przetworzona w funkcji zwrotnej lub z obietnicą.