Mes: noviembre 2019

Ejemplo import-export

Peticiones:

async function getJSON(url) {
    const res = await fetch(url);

    if (!res.ok) {
        throw new Error(res.status); // 404
    }

    const data = await res.json();
    return data;
}

async function postJSON(url, obj) {
    const options = {
        method: 'POST',
        body: JSON.stringify(obj),
        headers: {
            'Content-Type': 'application/json'
        }
    };
    const res = await fetch(url,options);

    if (!res.ok) {
        throw new Error(res.status); // 404
    }

    const data = await res.json();
    return data;
}

export {getJSON, postJSON}

Categorías:

import {getJSON,postJSON} from './peticiones.js';

function getCategorias() {
    getJSON("https://localhost:44333/api/Categories")
            .then(data => console.log(data))
            .catch(error => console.log(error));
}

function addCategorias(categoria) {
    postJSON("https://localhost:44333/api/Categories",categoria)
            .then(data => console.log(data))
            .catch(error => console.log(error));
}
getCategorias();
addCategorias({"nombre":"doom","descripcion":"MATA"});

Ejercicio Fetch+API

Vamos a crear una web para hacer el mantenimiento de una tabla usando fetch.

Podéis usar la API que queráis pero yo os pongo aquí como debería ser en el caso del comic:

Todas las acciones se ejecutarán usando fetch.

Evitar error CORS

Ponemos lo siguiente en nuestra API:

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddDbContext<Contexto>(options =>
                   options.UseSqlServer(Configuration.GetConnectionString("MVCBasicContext")));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }
            app.UseCors("MyPolicy");
            app.UseHttpsRedirection();
            app.UseMvc();
        }

Ejemplo acceso a web api

<script>

    fetch("https://localhost:44339/api/Alumnoes").then(resp => resp.json())
        .then(data => {
            for (alumno of data) {
                console.log(alumno.id + "-" + alumno.nombre + "-" + alumno.nota);
            }
        })

    let alumno = { nombre: "Firulai", nota: 8 };
    let params = {
        method: 'POST',
        body: JSON.stringify(alumno),
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    };
    fetch('https://localhost:44339/api/Alumnoes', params)
        .then(response => response.json())
        .then(json => console.log(json))

    alumno = { id: 9, nombre: "Firulai", nota: 6 };
    params = {
        method: 'PUT',
        body: JSON.stringify(alumno),
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    };
    fetch('https://localhost:44339/api/Alumnoes/9', params)
        .then(response => response.json())
        .then(json => console.log(json))
        .catch(error => console.log(error));

    params = {
        method: 'DELETE',
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    };
    fetch('https://localhost:44339/api/Alumnoes/13', params)
        .then(response => response.json())
        .then(json => console.log(json))
        .catch(error => console.log(error));
</script>

Ejercicio usuarios

En la siguiente url:
https://randomuser.me/api/?results=3
Nos devuelve información aleatoria sobre usuarios.
Vamos a crear una web que al pulsar un botón nos pida por fetch a esa web 3 usuarios y nos muestre su nombre y su foto.

Ejercicio promesas

Vamos a crear una función cargar imagen a la que le pasemos una url e intente cargar la imagen, si existe la url y es una imagen que la ponga en un div. Si no hay imagen que ponga un mensaje de imagen no encontrada.
Con promesas.

Fetch ejemplo

<script>


    fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
        .then(
            function (response) {
                console.log(response);
                if (response.status !== 200) {
                    console.log('Looks like there was a problem. Status Code: ' +
                        response.status);
                    return;
                }

                // Examine the text in the response
                response.json().then(function (data) {
                    console.log(data);
                });
            }
        )
        .catch(function (err) {
            console.log('Fetch Error :-S', err);
        });

    fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
        .then(
            function (response) {
                return response.json()

                // Examine the text in the response

            }
        ).then(function (data) {
            console.log(data);
        })
        .catch(function (err) {
            console.log('Fetch Error :-S', err);
        });

    fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(function (err) {
            console.log('Fetch Error :-S', err);
        });

    fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({
            title: 'foo',
            body: 'bar',
            userId: 1
        }),
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    })
        .then(response => response.json())
        .then(json => console.log(json))

    let data = {
        title: 'foo',
        body: 'bar',
        userId: 1
    };

    let params = {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            "Content-type": "application/json; charset=UTF-8"
        }
    };

    fetch('https://jsonplaceholder.typicode.com/posts',params)
        .then(response => response.json())
        .then(json => console.log(json))
</script>