JavaScriptにおけるAJAXエラーの完全なインターセプト

fetchが返すPromiseは、ネットワークエラーが発生した場合にのみエラーで拒否されます。サーバーが 404 や 500 のようなステータスで応答した場合、 Promiseは成功として解決されますが、ステータス ok は false に設定されます。

両方のタイプのエラーをインターセプトしましょう:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('不正な応答ステータス');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

HTTP応答ステータスが不正な場合のエラーも catch ブロックで捕捉されるようにします。そのためには、throw を通じてエラーを次に伝播させます:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('不正な応答ステータス');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

リクエストが成功した場合はページのテキストを出力し、何か問題があった場合はエラーを出力してください。