閱讀Fetch Promise的正文

我確定這有一個簡單的答案，但對於我的生活，我無法弄清楚如何去做。閱讀Fetch Promise的正文

我有以下快速端點用於上傳到Google雲端存儲。它的偉大工程，並從谷歌API的響應給我，我要傳回給我的前端唯一的文件名：

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; 
});

我通過調用該文件傳遞給它一個簡短的函數達到這個終點：

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

const Client = { upload }; 
export default Client;

這個功能是從我的前端被稱爲像這樣：

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

這最終console.log(data)登錄到控制檯的響應。但是，我沒有看到任何地方我寫的回覆（"Unique File Name:" + file.name）

有沒有人有任何建議，我可以從客戶端的響應正文中檢索此信息？

編輯：

的data看起來是這樣的，當我CONSOLE.LOG它：

編輯2：

這是我得到的迴應時，我發佈一個文件我的端點使用郵差：

來源

2017-05-10 quicklikerabbit

當你使用'console.log'時，你的'data'看起來像什麼？ –

添加屏幕截圖 – quicklikerabbit

謝謝我認爲我知道這個問題，給我一秒 –

請注意，重新處理Response object。您需要基本上閱讀響應流與Response.json()或Response.text()（或通過其他方法）才能看到您的數據。否則，您的響應主體將始終顯示爲鎖定可讀流。例如：

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

如果這讓你意想不到的效果，你可能要檢查與Postman你的迴應。

來源

2017-05-10 23:14:14

我得到'控制檯未定義'。log（data）'如果我使用'response.text'或'response.blob'。如果我使用response.json，會得到一個語法錯誤：'Uncaught（in promise）SyntaxError：JSON位置0處的意外標記U.我想'U'是來自我的'Unique'，所以我認爲你在正確的軌道上 – quicklikerabbit

另外，你不能從我張貼的截圖中看到這個，但是擴展'... ''ReadableStream'中'locked'項的值爲'false' – quicklikerabbit

@quicklikerabbit當你用Postman這樣的東西打你的端點時，你會得到什麼？ –

@GabeRogan給我的答案（和我有一個錯字，如預期）

這是我更新的前端返回的響應正文代碼：

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

body是一個字符串寫着「唯一文件名：[文件名]」

編輯：

這裏的提取API的一個很好的解釋和讀取respons你從承諾對象中得到：https://css-tricks.com/using-fetch/

來源

2017-05-11 00:31:26 quicklikerabbit

閱讀Fetch Promise的正文

回答

相關問題