Loading ...

Richieste HTTP in Aurelia

Richieste HTTP in Aurelia

In questi giorni sto facendo qualche test su Aurelia.io, e mi sono imbattuto nel "problema" di eseguire richieste HTTP.

Ci sono due alternative, ed io ho deciso di optare per aurelia-fetch-client, che però va installato a parte.

Da terminale spostatevi dentro la cartella del progetto e date questi comandi:

$ npm install aurelia-fetch-client whatwg-fetch --save

Fatto questo aprite il file Javascript dove volete eseguire la richiesta:

import {HttpClient, json} from 'aurelia-fetch-client';

let client = new HttpClient();
let filmsUrl = "URL_BASE_SERVIZIO/";
let latency = 200;
var films;

client.configure(config => {
    config.useStandardConfiguration()
            .withBaseUrl(filmsUrl)
            .withDefaults({
                credentials: 'same-origin',
                headers: {
                    'X-Requested-With': 'Fetch'
                }
            })
            .withInterceptor({
                request(request) {
                    return request;
                }
            });
});

export class WebAPI {
    isRequesting = false;

    getFilmList() {
        this.isRequesting = true;
        client.fetch('films.php', {
            method: 'get'
        }).then(response => response.json())
                .then(data => {
                    films = data;
                })
                .catch(error => {
                    console.log(error);
                });

        return new Promise(resolve => {
            setTimeout(() => {
                let results = films.map(x => {
                    return {
                        nome: x.nome
                    }
                });
                resolve(results);
                this.isRequesting = false;
            }, latency);
        });

    }
}

Nella configurazione abbiamo impostato l'url base del servizio, passando sotto l'end-point finale.

Ovviamente i dati sono in formato JSON, e sono vengono letti ed interpretati.

Questo file (web-api.js) verrà richiamato nel file Javascript della nostra route:

import {WebAPI} from './web-api';
import {inject} from 'aurelia-framework';

@inject(WebAPI)
export class FilmList {
    constructor(api) {
        this.api = api;
        this.films = [];
    }

    created() {
        this.api.getFilmList().then(films => this.films = films);
    }

    select(film) {
        this.selectedId = film.id;
        return true;
    }
}

Infine:

<template>
    <div class="film-list">
        <ul class="list-group">
            <li repeat.for="film of films" class="list-group-item">
                <p>${film.nome}</p>
            </li>
        </ul>
    </div>
</template>

Enjoy!