Примеры использования fetch

Чтение метаданных ответа

fetch("https://httpbin.org/json").then((response) => {
	console.log(response.status);
	console.log(response.statusText);
	console.log(response.headers.get("Content-Type"));
	console.log(response.headers.get("Date"));
});

Чтение текста ответа

fetch("https://httpbin.org/html")
	.then((response) => response.text())
	.then((data) => console.log(data));

Чтение json ответа

fetch("https://httpbin.org/json", {
	headers: {
		Accept: "application/json",
	},
})
	.then((response) => response.json())
	.then((data) => console.log(data))
	.catch((ex) => console.log("parsing failed", ex));

Отправка json

fetch("https://httpbin.org/post", {
	method: "POST",
	headers: {
		Accept: "application/json",
		"Content-Type": "application/json; charset=UTF-8",
	},
	body: JSON.stringify({ k: "v" }),
});

Отправка формы (multipart/form-data)

const form = document.querySelector("form");

fetch("https://httpbin.org/post", {
	method: "POST",
	body: new FormData(form),
});

Отправка формы (application/x-www-form-urlencoded) вариант 1

fetch("https://httpbin.org/post", {
	method: "POST",
	body: new URLSearchParams({ k1: "v1", k2: "v2" }),
});

Отправка формы (application/x-www-form-urlencoded) вариант 2

fetch("https://httpbin.org/post", {
	method: "POST",
	headers: {
		"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
	},
	body: "k1=v1&k2=v2",
	// body: qs.stringify({ k1: "v1", k2: "v2" })
});

Отправка отдельного файла из формы

const input = document.querySelector('input[type="file"]');
const data = new FormData();
data.append("file", input.files[0]);

fetch("https://httpbin.org/post", {
	method: "POST",
	body: data,
});

Отправка файла, созданного на лету

const file = new Blog(["Проверка"], { type: "text/plain" });
const data = new FormData();
data.append("file", file, "hello.txt");

fetch("https://httpbin.org/post", {
	method: "POST",
	body: data,
});

Отправка cookies

Если нужна отправка cookies, то лучше не полагаться на значение по умолчанию, а явно указывать credentials: "same-origin" (либо include при CORS запросах). Поскольку в предыдущих версиях спецификации fetch значением по умолчанию было omit, а не same-origin.

fetch("https://httpbin.org/post", {
	method: "POST",
	credentials: "same-origin",
	body: data,
});

Basic авторизация

function base64(str) {
	if (Buffer && Buffer.from) {
		return Buffer.from(username + ":" + password).toString("base64");
	} else if (btoa) {
		return btoa(str);
	} else {
		throw new Error("");
	}
}

fetch("https://httpbin.org/basic-auth/user/passwd", {
	headers: {
		Authorization: "Basic " + base64("user:passwd"),
	},
});

Отмена запроса

const abortController = new AbortController();

fetch("https://httpbin.org/", {
	signal: abortController.signal,
}).catch((err) => {
	if (err.name == "AbortError") {
		console.log("Aborted!", err);
	} else {
		throw err;
	}
});

setTimeout(() => abortController.abort(), 0);

Обработка http статусов ответа

У fetch есть особенность, из-за которой он не генерирует ошибку в зависимости от http статуса ответа. Это поведение можно изменить, например, таким сопособом.

function checkResponseStatus(response) {
	if (response.status >= 200 && response.status < 300) {
		return response;
	} else {
		const error = new Error(response.statusText);
		error.response = response;
		throw error;
	}
}

fetch("https://httpbin.org/json")
	.then(checkResponseStatus)
	.then((res) => res.json())
	.then((data) => console.log("request succeeded with JSON response", data))
	.catch((error) => console.log("request failed", error));