web-dev-qa-db-fra.com

Comment retourner le retour d'un rappel de promesse avec fetch?

Je suis un peu perplexe. J'ai oublié comment faire cela . J'ai une fonction appelée ext.get () qui prend un paramètre de url. Il récupère une réponse de l'URL. La fonction ext.get () est censée renvoyer la réponse sous forme de JSON. Je ne pense pas que ce soit le cas.

ext.get = (url) => {
        let myHeaders = new Headers();

        let options = {
            method: 'GET',
            headers: myHeaders,
            mode: 'cors'
        };

        //fetch get

        fetch(url, options).then(response => {
            console.log(JSON.stringify(response.json()))
            return JSON.stringify(response.json())

        });

    };
javascriptecmascript-6fetch-api
7
Blaze349

Si vous avez besoin de la réponse en tant que JSON - et si vous tenez compte de response.json(), vous obtenez le même résultat que response.text().then(txt => JSON.parse(txt)).

    return fetch(url, options).then(response => response.text());

Donc, la fonction complète serait

ext.get = (url) => {
    let myHeaders = new Headers();
    let options = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors'
    };
    return fetch(url, options).then(response => response.text());
};

De cette façon, vous ne faites pas essentiellement JSON.stringify(JSON.parse(json)) ... qui est juste json

Cependant, je suppose que vous voulez un objet javascript ordinaire

ext.get = (url) => {
    let myHeaders = new Headers();
    let options = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors'
    };
    return fetch(url, options).then(response => response.json());
};

Vous utiliseriez alors ceci comme:

ext.get('url').then(result => {
    // result is the parsed JSON - i.e. a plan ol' javascript object
});
8
Jaromanda X

Vous utilisez fetch, qui est une API asynchrone. Cela signifie que votre fonction doit également être asynchrone, c'est-à-dire qu'elle doit renvoyer une Promise. (Vous pouvez le faire avec un rappel, mais nous sommes en 2017 ...)

Vous ne pouvez pas retourner de code JSON à partir de la fonction car celle-ci le sera avant que la réponse du serveur ne soit disponible. Vous devez retourner une promesse et vous en occuper en utilisant then (ou await ) dans votre code d'appel.

La façon la plus simple et la meilleure de procéder consiste simplement à renvoyer le résultat de l'appel fetch une fois qu'il a été transformé. Vous ne voulez pas analyser le JSON mais le renvoyer sous forme de chaîne. Cela nécessite la response.text() call:

ext.get = (url) => {
    let myHeaders = new Headers();

    let options = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors'
    };

    //fetch get

    return fetch(url, options).then(response => response.text());
};

Et votre code d'appel:

ext.get('http://example.com').then((response) => {
    console.log(response); // or whatever
});

ou avec await :

let response = await ext.get("http://example.com");
2
lonesomeday