web-dev-qa-db-fra.com

Comment obtenir la longueur du contenu de la réponse d'une requête avec fetch ()

Je recevais une erreur en retournant response.json() quand je faisais une demande avec un corps de réponse vide, alors j'essaie simplement de retourner un objet vide lorsqu'il y a un corps vide. L’approche que j’étais en train de faire consiste à vérifier l’en-tête Content-Length de la réponse; cependant, response.headers.get('Content-Length') renvoie en quelque sorte null. Voici mon code:

function fetchJSON(url, options, state = null) {
    return fetch(url, Object.assign({}, options, {
            // TODO: Add options here that should be there for every API call
            // TODO: Add token if there is one
        }))
        .then(response => {
            // Pass the JSON formatted body to the next handler
            if (response.ok === true) {
                if (response.headers.get('Content-Length') === 0) return {};
                return response.json();
            }

            // If the response was not an 2xx code, throw the appropriate error
            if (response.status === 401) throw new AuthorizationError("You are not authorized to perform this action");

            // If it is an error code that we did not expect, throw an regular error and hope that it gets noticed by
            // a developer
            throw new Error("Unexpected response: " + JSON.stringify(response));
        });
}

Pourriez-vous peut-être m'aider à trouver le Content-Length de la réponse ou m'aider à trouver une autre approche?

javascriptfetch-api
8
jbakker

Le serveur doit exposer l'en-tête à l'aide de Access-Control-Expose-Headers sur le serveur:

Access-Control-Expose-Headers: Content-Length

@sideshowbarker comment explique pourquoi vous pouvez voir l'en-tête dans le panneau de réseau du navigateur, mais recevez null lorsque vous faites response.headers.get("Content-Length"): 

Tout simplement parce que votre navigateur reçoit l'en-tête et que vous pouvez voir le header dans devtools ne signifie pas que votre code JavaScript frontal peut voir il. Si la réponse d’une demande d’origine croisée n’a pas de En-têtes de contrôle d'accès-contrôle: réponse Content-Length - comme indiqué dans cette réponse - alors c’est votre navigateur lui-même qui bloquera votre code de pouvoir accéder à l'en-tête. Pour une demande d'origine croisée, votre navigateur n'exposera qu'un en-tête de réponse particulier à votre fichier code JavaScript frontal si la valeur de contrôle d'accès-en-tête contient le nom de cet en-tête particulier.

Vous pouvez le voir fonctionner en copiant/collant ceci dans la console:

fetch("//stackoverflow.com").then(response => console.log(response.headers.get("content-length")))
13
Ori Drori

J'ai juste résolu mon problème en mettant simplement la response.json() dans un bloc try/catch et en rattrapant l'erreur qui se produit lorsque j'essaie d'analyser un corps vide. Ce n'est pas la solution idéale, mais cela fonctionne pour moi.

1
jbakker