Fetch API

Fetch API является заменой устаревшего XMLHttpRequest.

Fetch API содержит метод fetch() с одним аргументом, в котором указывается URL.


fetch('https://example.com/data')
    .then( // code that handles the response )
    .catch( // code that runs if the server returns an error )

Интерфейс Response позволяет обрабатывать ответ и ошибки. Интерфейс содержит несколько свойств.

headers
url
redirected
type

Метод redirect() позволяет перенаправить запрос на другой адрес.


fetch(url)
    .then( response => response.redirect(newURL)); // redirects to another URL
    .then( // do something else )
    .catch( error => console.log('There was an error: ', error))

Метод text() работает с текстовым потоком.

Метод blob() работает с сырыми данными.

Метод json() работает с данными JSON.

Можно создать собственный объект Response.


const response = new Response( 'Hello!', {
    ok: true,
    status: 200,
    statusText: 'OK',
    type: 'cors',
    url: '/api'
});

Интерфейс Request позволяет создавать нужные запросы. Содержит свойства.

url
method (по умолчанию GET)
headers (объект Headers)
mode
cache
credentials
redirect


const request = new Request('https://example.com/data', {
    method: 'GET',
    mode: 'cors',
    redirect: 'follow',
    cache: 'no-cache'
});

Создадим страницу для демонстрации Ajax.


<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Ajax Example</title>
</head>
<body>

<button id='number'>Number Fact</button>
<button id='chuck'>Chuck Norris Fact</button>

<div id='output'>
Ajax response will appear here
</div>

<script src='main.js'></script>

</body>
</html>

Страница содержит две кнопки и один элемент div для вывода информации. Первая кнопка будет получать обычный текст, второй - JSON.

Первая кнопка будет делать запрос к сайту NumbersAPI.

Вторая кнопка обращается к сайте chucknorris.io.

Создадим файл сценария main.js.


const textButton = document.getElementById('number');
const apiButton = document.getElementById('chuck');
const outputDiv = document.getElementById('output');

const textURL = 'http://numbersapi.com/random';
const apiURL = 'https://api.chucknorris.io/jokes/random';

textButton.addEventListener('click', () => {
    fetch(textURL)
        .then( response => {
            outputDiv.innerHTML = 'Waiting for response...';
            if(response.ok) {
                return response;
            } throw Error(response.statusText);
        })
        .then( response => response.text() )
        .then( text => outputDiv.innerText = text )
        .catch( error => console.log('There was an error:', error))
},	false);

apiButton.addEventListener('click', () => {
    fetch(apiURL)
        .then( response => {
            outputDiv.innerHTML = 'Waiting for response...';
            if(response.ok) {
                return response;
            } throw Error(response.statusText);
        })
        .then( response => response.json() )
        .then( data => outputDiv.innerText = data.value )
        .catch( error => console.log('There was an error:', error))
}, false);

Код для кнопок практически идентичен, только во втором случае используется метод json(). Возвращаемый объект содержит свойство value, содержащий нужный текст.

В примере при ожидании ответа от сервера мы выводим сообщение Waiting for response.... Многие сайты используют в таких случаях специальные анимированные изображения. Можно выбрать готовые изображения с сайта Ajaxload и ему подобных.

Ajax также можно использовать для отправки информации.

Fetch API

Реклама