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

Fetch – это JavaScript метод, который используется для отправки запросов на сервер и получения данных. Этот метод является более современной и удобной заменой устаревшего XMLHttpRequest.

1

В данном примере отправляется GET-запрос на ajax.php, который выводит строку:

<?php
echo 'Строка из ajax.php';
PHP

После отправки запроса, его результат обрабатывается в первом then(). Если ответ успешный, то он преобразуется в строку, далее работа с ней идет во втором then().

fetch('https:://example.com/ajax.php')
.then(response => {
	return response.text();
})
.then(data => {
	console.log(data);
});
JS

Результат в консоли:

Строка из ajax.php

В первом then() можно проверить статус HTTP-запроса и определить, выполнился ли он успешно. В случае возникновения ошибок запроса, они будут обработаны в блоке catch().

JS:

fetch('https:://example.com/script404')
.then(response => {
	if (!response.ok) {
		throw new Error('Ошибка запроса');
	}
	return response.text();
})
.then(data => {
	console.log(data);
})
.catch(error => {
	console.log(error);
});
JS

Результат:

GET https:://example.com/script404 404 (Not Found)
Error: Ошибка запроса

Если от сервера ожидается ответ в формате JSON:

ajax.php:

<?php
$array = array(
	'key_1' => 'value_1',
	'key_2' => 'value_2'
);

header('Content-Type: application/json');
echo json_encode($array, JSON_UNESCAPED_UNICODE);
PHP

JS:

fetch('https:://example.com/ajax.php')
.then(response => {
	return response.json();
})
.then(data => {
	console.dir(data);
});
JS

Результат:

{
	key_1: 'value_1',
	key_2: 'value_2'
}

Можно передавать HTTP-заголовки вторым параметром метода fetch(). Заголовки передаются в формате «ключ: значение».

fetch('https:://example.com/ajax.php', {
headers: {
	'Accept': 'application/json',
	'Authorization': 'Basic 123456'
}})
.then(response => {
	return response.json();
})
.then(data => {
	console.dir(data);
});
JS

В GET-запросах параметры передаются непосредственно в URL (?ключ=значение&...). Чтобы сформировать такой URL из объекта параметров можно применить встроенный класс «URL».

JS:

let params = {name: 'Иван', family: 'Иванов'};
let url = new URL('https:://example.com/ajax.php');
url.search = new URLSearchParams(params);

fetch(url, {
headers: {
	'Accept': 'application/json'
}})
.then(response => {
	return response.json();
})
.then(data => {
	console.dir(data);
});
JS

ajax.php

<?php
print_r($_GET);
PHP

Результат в переменной $_GET:

Array(
    [name] => Иван
    [family] => Иванов
)
2

POST-запрос

Для POST-запроса нужно указать method: 'POST' и передать параметры в body в виде «ключ=значение&..» или воспользоваться классом URLSearchParams:

JS:

let data = {
	key_1: 'value_1',
	key_2: 'value_2'
};

fetch('https:://example.com/ajax.php', {
	method: 'POST',
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	},
	body: new URLSearchParams(data).toString()
})
.then(response => {
	return response.text();
})
.then(data => {
	console.log(data);
});
JS

ajax.php

<?php
print_r($_POST);
PHP

Результат:

Array(
    [key_1] => value_1
    [key_2] => value_2
)

Второй пример отправляет данные на сервер в виде JSON.

JS:

let data = {
	key_1: 'value_1',
	key_2: 'value_2'
};

fetch('https:://example.com/ajax.php', {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify(data)
})
.then(response => {
	return response.text();
})
.then(data => {
	console.dir(data);
});
JS

ajax.php

<?php
$data = json_decode(file_get_contents('php://input'), true);
print_r($data);
PHP

Результат:

Array(
    [key_1] => value_1
    [key_2] => value_2
)
3
<input type="text" id="input_text">
<input type="file" id="input_file">
<input type="submit" value="Отправить" onclick="sendForm();">

<script>
function sendForm(){
	var text = document.getElementById('input_text');
	var file = document.getElementById('input_file');
	
	var formData = new FormData();
	formData.append('text', text.value)
	formData.append('file', file.files[0]);
	
	fetch('https:://example.com/ajax.php', {
		method: 'POST',
		body: formData
	})
	.then(response => {
		return response.text();
	})
	.then(data => {
		console.log(data);
	});
}
</script>
HTML

ajax.php

<?php
print_r($_POST);
print_r($_FILES);
PHP

Результат:

Array(
    [text] => Текст из поля
)
Array(
    [file] => Array(
		[name] => photo.png
		[type] => image/png
		[tmp_name] => /tmp/????
		[error] => 0
		[size] => 189415
	)
)
<input type="text" id="input_text">
<input type="file" id="input_file" multiple>
<input type="submit" value="Отправить" onclick="sendForm();">

<script>
function sendForm(){
	var text = document.getElementById('input_text');
	var file = document.getElementById('input_file');
	
	var formData = new FormData();
	formData.append('text', text.value)

	for (let item of file.files) {
		formData.append('files[]', item);
	}
	
	fetch('https:://example.com/ajax.php', {
		method: 'POST',
		body: formData
	})
	.then(response => {
		return response.text();
	})
	.then(data => {
		console.log(data);
	});
}
</script>
HTML

Результат:

Array(
	[text] => Текст из поля
)
Array(
	[files] => Array(
		[name] => Array(
			[0] => photo.png
			[1] => photo-2.png
		)
		[type] => Array(
			[0] => image/png
			[1] => image/png
		)
		[tmp_name] => Array(
			[0] => /tmp/????
			[1] => /tmp/????
		)
		[error] => Array(
			[0] => 0
			[1] => 0
		)
		[size] => Array(
			[0] => 189415
            [1] => 88603
		)
	)
)
4

Пример использования fetch с методом PUT:

fetch('https:://example.com/update', {
	method: 'PUT',
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify({ key: 'value' })
})
.then(response => {
	return response.json();
})
.then(data => console.log(data));
JS

Метод DELETE:

fetch('https:://example.com/del/1', {
	method: 'DELETE',
})
.then(response => {
	return response.json();
})
.then(data => console.log(data));
JS
5

По умолчанию fetch запросы не отправляет cookies. Чтобы их включить добавить параметр credentials:

fetch('https:://example.com/ajax.php', {
	method: 'GET',
	credentials: 'include'
})
.then(response => {
	return response.text();
})
.then(data => {
	console.log(data);
});
JS
6
В JavaScript Fetch API нет синхронных запросов, так как Fetch использует промисы для работы с асинхронным кодом. Однако можно использовать async/await для достижения синхронного поведения.
async function fetchData() {
	try {
		const response = await fetch('https:://example.com/ajax.php');
		const data = await response.json();
 
		// Далее идет ваш код, который будет выполняться после получения данных
		console.log(data);
	} catch (error) {
		console.error('Error:', error);
	}
}
 
fetchData();
JS
7

Data on support for the fetch feature across the major browsers from caniuse.com

05.03.2024, обновлено 10.03.2024
4329

Комментарии

, чтобы добавить комментарий.

Другие публикации

Local Storage и Session Storage в JavaScript
Web Storage API это набор методов, при помощи которых в браузере можно хранить данные в виде пар ключ=значение на...
15618
+3
HTTP коды
Список основных кодов состояния HTTP, без WebDAV.
11831
+1
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
54464
+3
Примеры использования PDO MySQL
В статье приведены основные примеры работы с расширением PHP PDO. Такие как подключение к БД, получение, изменение и...
107311
+8
Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
32814
+24
Авторизация на сайте через Facebook
Инструкция, как получить данные пользователя Facebook через авторизацию OAuth.
23087
+9