> For the complete documentation index, see [llms.txt](https://programmingfundamental.gitbook.io/programmingwithjava/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://programmingfundamental.gitbook.io/programmingwithjava/internet-tekhnologii/laboratorno-uprazhnenie-9/javascript-object-notation/fetch.md).

# Fetch

Fetch предоставя интерфейс на JavaScript за отправяне на заявки и получаване на отговори в HTTP. Той също така предоставя глобален метод fetch(), който осигурява лесен, логичен начин за извличане на ресурси, асинхронно от мрежата.

Този вид функционалност е постигнато преди това чрез XMLHttpRequest. Fetch предоставя по-добра алтернатива, която може лесно да се използва.

Използване:

**Пример**

```
fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });
```

Примера извлича JSON файл от мрежата и го отпечатва на конзолата. Метода fetch приема един аргумент – пътят до ресурса, който искате да извлечете.

HTTP отговора не е действителен JSON. За да се извлече съдържанието на JSON файла от отговора, трябва да се използва метода json().

###

### Изпращане на заявки

```
// Пример за заявка POST:
async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin', 
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
    body: JSON.stringify(data)
  });
  return response.json();
}

postData('https://example.com/answer', { answer: 42 })
  .then((data) => {
    console.log(data); 
  });
```

| Атрибути       | Стойност по подразбиране           | Стойности                                              |
| -------------- | ---------------------------------- | ------------------------------------------------------ |
| method         | GET                                | GET, POST, PUT, DELETE, etc.                           |
| mode           | cors                               | no-cors, cors, same-origin                             |
| cache          | default                            | default, no-cache, reload, force-cache, only-if-cached |
| credentials    | same-origin                        | include, \*same-origin, omit                           |
| header         | 'Content-Type': 'application/json' | 'Content-Type': 'application/x-www-form-urlencoded'    |
| redirect       | follow                             | manual, \*follow, error                                |
| referrerPolicy | client                             | o-referrer, \*client                                   |
| body           | -                                  | body data type must match "Content-Type" header        |

###

### Изпращане на JSON данни

```
const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});
```

###

### Проверка дали извличането е успешно

```
fetch('flowers.jpg')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then((myBlob) => {
    myImage.src = URL.createObjectURL(myBlob);
  })
  .catch((error) => {
    console.error('There has been a problem with your fetch operation:', error);
  });
```

###

### Form data to Json

```
  function toJSONString( form ) {
	var obj = {};
	var elements = form.querySelectorAll( "input, select, textarea" );
	for( var i = 0; i < elements.length; ++i ) {
		var element = elements[i];
		var name = element.name;
		var value = element.value;

		if( name ) {
			obj[ name ] = value;
		}
	}

	return JSON.stringify( obj );
}
```