Блог

Главная - JavaScript язык программирования - JavaScript | fetch() Method
You are currently viewing JavaScript | fetch() Method

JavaScript | fetch() Method

Метод fetch() в JavaScript используется для запроса на сервер и загрузки информации с веб-страниц. Запрос может быть любого API, который возвращает данные формата JSON или XML. Этот метод возвращает обещание.

Синтаксис:

fetch( url, options )

Параметры: Этот метод принимает два параметра, как указано выше и описано ниже:

  • URL (URL-адрес): Это URL-адрес, по которому должен быть сделан запрос.
  • Options (Опции): Это набор свойств. Это является необязательный параметр.

Возвращаемое Значение: Он возвращает обещание независимо от того, решено оно или нет. Возвращаемые данные могут быть в формате JSON или XML.
Это может быть массив объектов или просто один объект.

Пример 1:

ПРИМЕЧАНИЕ: Без опций Fetch всегда будет действовать как запрос get.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
	"width=device-width, initial-scale=1.0">

	<title>JavaScript | fetch() Method</title>
</head>

<body>
	<script>

		// API for get requests
		let fetchRes = fetch(
"https://jsonplaceholder.typicode.com/todos/1");

		// fetchRes is the promise to resolve
		// it by using.then() method
		fetchRes.then(res =>
			res.json()).then(d => {
				console.log(d)
			})
	</script>
</body>

</html>

Выход:

Создание запроса на публикацию с использованием выборки: Запросы на публикацию можно выполнять с помощью выборки, предоставляя параметры, как указано ниже:

let options = {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json;charset=utf-8'
 },
 body: JSON.stringify(data)
}

Пример 2:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content=
		"width=device-width, initial-scale=1.0">

	<title>JavaScript | fetch() Method</title>
</head>

<body>
	<script>
		user = {
			"name": "Geeks for Geeks",
			"age": "23"
		}
		
		// Options to be given as parameter
		// in fetch for making requests
		// other then GET
		let options = {
			method: 'POST',
			headers: {
				'Content-Type':
					'application/json;charset=utf-8'
			},
			body: JSON.stringify(user)
		}

		// Fake api for making post requests
		let fetchRes = fetch(
"http://dummy.restapiexample.com/api/v1/create",
										options);
		fetchRes.then(res =>
			res.json()).then(d => {
				console.log(d)
			})
	</script>
</body>

</html>

Выход:

Метки: