Cómo hacer una solicitud HTTP en JavaScript

'Xmlhttprequest' y 'buscar()' son dos funciones poderosas en JavaScript que se pueden usar para hacer llamadas AJAX. Xmlhttprequest (XHR) es una tecnología heredada que ha existido desde los primeros días de la web. Le permite realizar solicitudes HTTP desde el lado del cliente, y todavía se usa ampliamente hoy en día. Mientras tanto, la función Fetch () es una adición más nueva a JavaScript que se asume lentamente como la forma preferida de hacer llamadas AJAX. Utiliza promesas, por lo que es más fácil escribir y depurar, y también admite la transmisión y otras características modernas.

Tanto xmlhttprequest como fetch () son excelentes herramientas para hacer llamadas AJAX, pero Fetch () generalmente se considera la mejor opción para la mayoría de las aplicaciones. Entonces, si está buscando una manera de hacer llamadas de Ajax en JavaScript, prueba Fetch (). Creemos que te sorprenderá gratamente los resultados!

Realice la solicitud HTTP en JavaScript

Aquí hay un ejemplo de usar Xmlhttprequest hacer un CONSEGUIR Solicitud para recuperar datos de la API remota:

const xhr = new xmlhttprequest (); XHR.ResponseType = 'json'; XHR.onreadyStateChange = () => if (xhr.ReadyState === xmlhttprequest.Hecho) consola.Log (XHR.respuesta); xhr.Abrir ('Get', 'https: // API.ejemplo.com/'); XHR.setRequestHeader ('autorización', 'portador' + api_key); XHR.enviar();

123456789101112

const xhr = new xmlhttprequest (); xhr.ResponseType = 'json'; XHR.onreadyStateChange = () => if (xhr.ReadyState === xmlhttprequest.Hecho) consola.Log (XHR.respuesta); xhr.Abrir ('Get', 'https: // API.ejemplo.com/'); xhr.setRequestHeader ('autorización', 'portador' + api_key); xhr.enviar();

Aquí hay un ejemplo de usar buscar() hacer un CONSEGUIR Solicitud para recuperar datos de una API remota.

buscar ('https: // api.ejemplo.com/', encabezados: ' Autorización ':' Bearer ' + API_KEY) .Entonces (respuesta => respuesta.json ()) .entonces (data => consola.Dato de registro));

1234567

buscar ('https: // api.ejemplo.com/', encabezados: ' Autorización ':' Bearer ' + API_KEY) .Entonces (respuesta => respuesta.json ()) .entonces (data => consola.Dato de registro));

Ambos ejemplos suponen que tiene una clave API almacenada en una variable llamada API_Key.

También puedes usar buscar() hacer otros tipos de solicitudes HTTP, como CORREO, PONER, y BORRAR, Al pasar un objeto de opciones como el segundo argumento. Por ejemplo:

Fetch ('/url', método: 'post', cuerpo: json.Stringify (name: 'John', Age: 30,), encabezados: 'content-type': 'application/json',,);

12345678910

Fetch ('/url', método: 'post', cuerpo: json.Stringify (name: 'John', Age: 30,), encabezados: 'content-type': 'application/json',,);

Tenga en cuenta que 'Xmlhttprequest' y 'buscar()' son asíncronos, lo que significa que el código no se bloqueará mientras se realiza la solicitud. En cambio, la respuesta se procesará en una función de devolución de llamada o con una promesa.