Volledige AJAX-foutafhandeling in JavaScript

Die belofte wat deur fetch teruggegee word, word slegs met 'n fout gevolg as daar 'n netwerkfout plaasgevind het. As die bediener egter 'n antwoord met status 404 of 500 terugstuur, dan sal die belofte suksesvol voltooi word, maar die status ok sal op false gestel wees.

Laat ons albei tipes foute afhandel:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('slegte antwoordstatus');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Laat ons maak dat die fout wat verband hou met 'n slegte HTTP-antwoordstatus ook deur die catch-blok gevang word. Om dit te doen, gooi ons dit verder deur middel van throw:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('slegte antwoordstatus');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Vertoon die teks van die bladsy as die versoek suksesvol was, en die fout as daar iets verkeerd geloop het.