フロントエンドとバックエンド(NodeJS)の両方でFetch APIを使用していますが、応答をjsonとして解析すると、多くの問題が発生します。
response.json()
はpromiseを返すため、応答の本文が何であるかを事前に知りません。本文が空の場合、JSON解析は次のエラーで失敗します。
SyntaxError: Unexpected end of input
だから私の質問は、応答が空のときに応答を解析しないようにする方法です。
ありがとう
Response
オブジェクトを取得したら、ヘッダーを調べて、Content-Length
の内容を確認します。これに基づいて、解析するものがあるかどうかを知ることができます。しかしまた、JSONではないため、サーバーが空のapplication/json
リソースを返すのは偽物のようです。
response.json()
はPromiseを返すため、catch
でエラーを処理し、ダミーのデータオブジェクトを返すことができます。
fetch('url').then(response => {
return response.json().catch(err => {
console.error(`'${err}' happened, but no big deal!`);
return {};
});
}).then(data => {
console.log(data);
});
後述するように、response
を2回読み取ろうとすると、エラーが発生します:TypeError: Already Read
。
回避策として、元の応答をclone
し、複製されたオブジェクトに対してjson
を呼び出すことができます。
fetch('url').then(response => {
const responseCopy = response.clone();
return responseCopy.json().catch(_ => response.text());
}).then(data => {
console.log(data);
});
Trycatchでエラーを処理しない理由
try {
body = JSON.parse(body)
} catch (err) {
}
簡単です。以下のように応答ボディタイプを確認するだけです。
var contentType = response.headers.get('content-type')
if (contentType && contentType.indexOf('application/json') !== -1) {
return response.json();
}else{
//if response is not json and mostly empty
return({})
}
応答がnullの場合、空のオブジェクトを返します