JavaScript에서 AJAX 오류 완전히 가로채기

fetch가 반환하는 프로미스는 네트워크 오류가 발생했을 때만 거부됩니다. 서버가 404나 500 상태로 응답해도, 프로미스는 성공적으로 이행되지만, 상태 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);
		}
	);
});

요청이 성공하면 페이지 텍스트를 출력하고, 문제가 발생하면 오류를 출력하세요.