Lesen Sie den Hauptteil eines Abrufversprechens

Lesezeit: 4 Minuten

Benutzer-Avatar
schnelles Kaninchen

Ich habe den folgenden Express-Endpunkt zum Hochladen in den Google Cloud-Speicher. Es funktioniert großartig und die Antwort von der Google-API gibt mir einen eindeutigen Dateinamen, den ich an mein Frontend zurückgeben möchte:

app.post('/upload', (req, res) => {
  var form = new formidable.IncomingForm(),
  files = [],
  fields = [];

  form
    .on('field', function(field, value) {
      fields.push([field, value]);
    })
    .on('file', function(field, file) {
      files.push([field, file]);
    })
    .on('end', function() {
      console.log('-> upload done');
    });
  form.parse(req, function(err, fields, files){
    var filePath = files.file.path;
    bucket.upload(filePath, function(err, file, apiResponse){
      if (!err){
        res.writeHead(200, {'content-type': 'text/plain'});
        res.end("Unique File Name:" + file.name);
      }else{
        res.writeHead(500);
        res.end();
      }
    });
  });

 return;
});

Ich erreiche diesen Endpunkt, indem ich eine kurze Funktion aufrufe, die die Datei an ihn übergibt:

function upload(file) {
  var data = new FormData();
  data.append('file', file);
  return fetch(`upload`,{
    method: 'POST',
    body: data
  });
}

const Client = { upload };
export default Client;

Diese Funktion wird von meinem Frontend wie folgt aufgerufen:

Client.upload(this.file).then((data) => {
  console.log(data);
});

Dieses Finale console.log(data) protokolliert die Antwort an die Konsole. Ich sehe jedoch nirgendwo die Antwort, die ich geschrieben habe ("Unique File Name:" + file.name)

Wie kann ich diese Informationen vom Antworttext auf der Clientseite abrufen?

Das data sieht so aus wenn ich console.log es:

Screenshot der Daten console.log

Dies ist die Antwort, die ich erhalte, wenn ich mit Postman eine Datei an meinen Endpunkt POST:

Screenshot der Antwort mit Postman

  • Was macht dein data aussehen wie wenn du console.log es?

    – Gabe Rogan

    10. Mai 2017 um 22:48 Uhr

  • Screenshot hinzugefügt

    – quicklikerabbit

    10. Mai 2017 um 22:53 Uhr

  • Danke, ich glaube, ich kenne das Problem, gib mir eine Sekunde

    – Gabe Rogan

    10. Mai 2017 um 22:55 Uhr

  • Was macht das fetch('[YOURENDPOINT]').then(response=>response.text()).then(data=>{ console.log(data);}) an der Konsole anmelden?

    – Gabe Rogan

    10. Mai 2017 um 23:11 Uhr

Benutzer-Avatar
Gab Rogan

Beachten Sie, dass Sie es mit a zu tun haben Antwortobjekt. Sie müssen im Grunde lesen den Antwortstrom mit Response.json() oder Response.text() (oder über andere Methoden), um Ihre Daten zu sehen. Andernfalls wird Ihr Antworttext immer als gesperrter lesbarer Stream angezeigt. Zum Beispiel:

fetch('https://api.ipify.org?format=json')
.then(response=>response.json())
.then(data=>{ console.log(data); })

Wenn dies zu unerwarteten Ergebnissen führt, sollten Sie Ihre Antwort mit überprüfen Postbote.

  • Ich erhalte undefined für die console.log(data) wenn ich benutze response.text oder response.blob. Ich erhalte einen Syntaxfehler, wenn ich response.json verwende: Uncaught (in promise) SyntaxError: Unexpected token U in JSON at position 0. Ich denke, das ‘U’ stammt von meinem ‘Unique’, also denke ich, dass Sie auf dem richtigen Weg sind

    – quicklikerabbit

    10. Mai 2017 um 23:30 Uhr


  • Außerdem können Sie dies nicht auf dem Screenshot sehen, den ich gepostet habe, sondern erweitern die ... für die locked Artikel in der ReadableStream liest false

    – quicklikerabbit

    10. Mai 2017 um 23:32 Uhr

  • @quicklikerabbit Was bekommst du, wenn du deinen Endpunkt mit so etwas wie Postman erreichst?

    – Gabe Rogan

    10. Mai 2017 um 23:42 Uhr

  • Postman gibt den eindeutigen Dateinamen im Hauptteil zurück und bestätigt, dass er tatsächlich vorhanden ist. Der Trick besteht nun darin, diesen Textkörper mit Javascript herauszubekommen!

    – quicklikerabbit

    10. Mai 2017 um 23:59 Uhr

  • Ich musste nur ersetzen .json() mit .text(), das ist in meinem Fall die Lösung. Vielen Dank.

    – nn

    1. Juni 2018 um 12:22 Uhr

Benutzer-Avatar
schnelles Kaninchen

Ich hatte einen Tippfehler in meinem Code, wie GabeRogan in diesem Kommentar darauf hingewiesen hat:

OK super. Um ganz ehrlich zu sein, habe ich absolut keine Ahnung, warum Sie undefiniert werden, außer dass es sich um eine Art Rechtschreibfehler handeln könnte?

Hier ist mein aktualisierter Code für das Frontend, das den Antworttext zurückgibt:

Client.upload(this.file).then(response => response.text())
  .then((body) => {
    console.log(body);
  });

body ist eine Zeichenfolge, die liest Unique File Name: [FILE-NAME]

Hier ist eine gute Erklärung der Fetch-API und das Lesen der Antwort, die Sie vom Promise-Objekt erhalten: CSS-Tricks: Verwenden von Fetch.

Sie können auch async/await verwenden:

Bei der Rückgabe von JSON-Inhalten:

Client.upload(this.file).then(async r => console.log(await r.json()))

oder einfach in Textform zurückgeben:

Client.upload(this.file).then(async r => console.log(await r.text()))

  • Ja, Sie müssen “abwarten”, sonst erhalten Sie statt des erwarteten Wertes ein Versprechen.

    – JM.

    15. Januar 2020 um 19:46 Uhr

Wenn Sie “undefiniert” für Daten erhalten und etwas mit der Antwort tun, stellen Sie sicher, dass Sie die Antwort zurückgeben.

Ich habe so etwas gemacht

fetch(URL)
    .then(response => {
        response.text();
        console.log(response.statusText);
    })
    .then(data => console.log(data)); // got "undefined"

Antwortobjekt zurückgeben: Antwort zurückgeben.text ();

fetch(URL)
    .then(response => {
        console.log(response.statusText);
        return response.text();
    })
    .then(data => console.log(data)); // got data

1227620cookie-checkLesen Sie den Hauptteil eines Abrufversprechens

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy