APIs de JavaScript

En esta página se muestran ejemplos del uso de Fetch

Peticiones simples

Ejemplo de petición GET

<script>

function servicio(url) {
    console.log("Abriendo de manera síncrona " + url);
    fetch(url)
            .then(function (response) {
                return response.json();
            })
            .then(function (jsonData) {
                resultado.innerHTML = "<img src='" + jsonData.message + "'>";
                console.log(jsonData);
            });
}

function servicioFlecha(url) {
    console.log("Abriendo de manera síncrona " + url);
    fetch(url)
            .then((response) => {
                return response.json();
            })
            .then((jsonData) => {
                resultado.innerHTML = "";
                console.log(jsonData);
            });
}

El servicio REST https://dog.ceo/api/breeds/image/random está libre para probarlo descargando un JSON con un enlace aleatorio a la foto de un perrito

Con un enlace aun servicio REST de un perro solamente veo el JSON y no puedo hacer más sin pulsar.
Con una petición asíncrona Fetch:
Con una petición asíncrona Fetch con funciones flecha:

Ejemplo de petición GET con objeto `init`

<script>

function servicioConfig(url) {
    let headers = new Headers();

    let config = {
        method: "GET",
        headers: headers,
        mode: "cors",
        cache: "default"
    }
    console.log("Abriendo de manera síncrona " + url);
    fetch(url, config)
            .then((response) => response.json())
            .then((jsonData) => {
                resultado2.innerHTML = "<img src='" + jsonData.message + "'>";
                console.log(jsonData);
            });
}

Petición Fetch:

Ejemplo de petición GET con error

<script>

function servicioError(url) {
    fetch(url).then(function (response) {
        if (response.ok) {
            response.blob().then(function (miBlob) {
                var objectURL =
                        URL.createObjectURL(miBlob);
                miImagen.src = objectURL;
            });
        } else {
            console.log('Respuesta de red OK pero error HTTP: ' + response.status);
        }
    })
            .catch(function (error) {
                console.log('Hubo un problema con la petición Fetch: ' + error.message);
            });

}

Petición Fetch con error de red porque el dominio no existe:
Petición Fetch a un servidor que sí existe pero a un recurso que no existe
Petición Fetch correcta con el mismo código a un recurso que sí existe:

Ejemplo de petición `fetch` a partir de objeto `Request`

<script>

const resultado4 = document.getElementById("resultado4");

let cabeceras = new Headers();

let datos = new FormData();
datos.append("user", "usuario");
datos.append("pass", "12345");

console.log("Datos formulario" + datos.toString());
let config = {
    method: "POST",
    headers: cabeceras,
    mode: "cors",
    cache: "default",
    body: datos
}

function servicioPost(url) {
    let miPeticion = new Request(url, config);

    fetch(miPeticion)
            .then((response) => {
                if (response.ok) {
                    response.text()
                            .then((miTexto) => {
                                resultado4.innerHTML = miTexto;
                            });
                } else {
                    console.log('Respuesta de red OK pero error HTTP: ' + response.status);
                }
            })
            .catch(function (error) {
                console.log('Hubo un problema con la petición Fetch: ' + error.message);
            });

}

Se envían datos a un formulario remoto a partir de un objeto FormData.

Petición Fetch:

Ejemplo de petición `fetch` a partir de objeto `Request` y otra con su copia

<script>

function servicioPostCopia(url) {
    let miPeticion = new Request(url, config);
    let miPeticion2 = new Request(url, config);
    let miPeticion3 = miPeticion.clone();

    fetch(miPeticion)
            .then((response) => {
                if (response.ok) {
                    response.text()
                            .then((miTexto) => {
                                resultado5.innerHTML = resultado5.innerHTML + "<br>Primera petición:" + miTexto;
                            });
                } else {
                    console.log('Respuesta de red OK pero error HTTP: ' + response.status);
                }
            })
            .catch(function (error) {
                console.log('Hubo un problema con la petición Fetch: ' + error.message);
            });

    fetch(miPeticion2)
            .then((response) => {
                if (response.ok) {
                    response.text()
                            .then((miTexto) => {
                                resultado5.innerHTML = resultado5.innerHTML + "<br>Segunda petición:" + miTexto;
                            });
                } else {
                    console.log('Respuesta de red OK pero error HTTP: ' + response.status);
                }
            })
            .catch(function (error) {
                console.log('Hubo un problema con la petición Fetch: ' + error.message);
            });
    fetch(miPeticion3)
            .then((response) => {
                if (response.ok) {
                    response.text()
                            .then((miTexto) => {
                                resultado5.innerHTML = resultado5.innerHTML + "<br>Tercera petición:" + miTexto;
                            });
                } else {
                    console.log('Respuesta de red OK pero error HTTP: ' + response.status);
                }
            })
            .catch(function (error) {
                console.log('Hubo un problema con la petición Fetch: ' + error.message);
            });

}

Se envían datos a un formulario remoto con tres peticiones, dos con el mismo constructor y una con clone().

Lanzar tres Peticiones Fetch copiadas:

Ejemplo de envío de JSON con un petición `fetch`

<script>

function servicioLogin(url) {
    let divLogin = document.getElementById("login");
    let data = { user: "usuario", password: "12345" };
  
    fetch(url, {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
        })
        .then((response) => {
            div.innerHTML =
            "Código respuesta: " +
            response.status +
            " " +
            response.statusText;
        .catch((exception) => console.error("Error: " + exception));
              }

Se envían datos a un servicio REST remoto con datos de autenticación.

Enviar datos JSON:

Inicio

Peticiones simples

Ejemplo de petición GET

Ejemplo de petición GET con objeto init

Ejemplo de petición GET con error

Ejemplo de petición fetch a partir de objeto Request

Ejemplo de petición fetch a partir de objeto Request y otra con su copia

Ejemplo de envío de JSON con un petición fetch

Ejemplo de petición GET con objeto `init`

Ejemplo de petición `fetch` a partir de objeto `Request`

Ejemplo de petición `fetch` a partir de objeto `Request` y otra con su copia

Ejemplo de envío de JSON con un petición `fetch`