JavaScriptfetch()>метод, який використовується для отримання ресурсів із сервера. Він повертає Promise, розв’язуючи об’єкт Response, який інкапсулює відповідь сервера на запит.fetch()>полегшує виконання запитів GET, які зазвичай використовуються для отримання даних, і ПОСТ запити, які використовуються для надсилання даних на сервери.
Крім того, fetch()> плавно інтегрує передові HTTP такі функції, як Спільне використання ресурсів між джерелами (CORS) та інші розширення, збагачуючи досвід веб-розробки покращеною безпекою та функціональною сумісністю.
Примітка. API Fetch поставляється з методом fetch(), який використовується для отримання даних із різних джерел.
Синтаксис:
sql count distinct
fetch('url') // api for the get request .then(response =>response.json()) .then(data => console.log(data));>Параметри:
- URL: URL-адреса, на яку потрібно зробити запит.
- Опції: Це масив властивостей. Це ан необов'язковий параметр. Доступні варіанти:
- Метод: Вказує метод HTTP для запиту. (може бути GET, POST, PUT або DELETE)
- Заголовки
- Тіло: Дані, які надсилаються разом із запитом.
- режим: Визначає режим запиту (наприклад, кори, nocors, same-origin тощо)
- Облікові дані : вказує, чи надсилати облікові дані користувача (файли cookie, заголовки автентифікації тощо) із запитом
Приклади методу JavaScript fetch().
Давайте розглянемо деякі приклади методу fetch. Ці приклади дають вам повне розуміння методу вибірки в JavaScript.
1 . Отримати запит за допомогою Fetch
У цьому прикладі показано, як зробити запит Get у методі fetch.
Примітка: Без параметрів Fetch завжди діятиме як запит на отримання.
Javascript // 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) })> Вихід:
Пояснення:
- Функція JS fetch() використовується для надсилання запиту GET на URL-адресу https://jsonplaceholder.typicode.com/todos/1. Ця функція повертає Promise, який розв’язує об’єкт Response, що представляє відповідь на запит.
- Метод then() прив’язаний до виклику fetch() для асинхронної обробки відповіді. Усередині функції зворотного виклику, переданої в then(), викликається метод res.json(), щоб проаналізувати тіло відповіді як JSON. Цей метод також повертає Promise, який розв’язує аналізовані дані JSON.
- Інший метод then() пов’язаний для обробки проаналізованих даних JSON. Усередині функції зворотного виклику проаналізовані дані JSON d записуються на консоль за допомогою console.log()
2 . Використання fetch для публікації даних JSON
У цьому прикладі ми завантажили дані JSON за допомогою API fetch() у JavaScript, ви можете встановити тіло запиту як рядкову версію ваших даних JSON і встановити відповідні заголовки, щоб вказати, що ви надсилаєте JSON.
Запити на публікацію можна надсилати за допомогою fetch, вказавши параметри, наведені нижче:
let options = { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(data) }>Перевіривши синтаксис запиту публікації, подивіться на наведений нижче приклад, який демонструє використання запиту публікації в методі отримання.
Javascript // Your JSON data const jsonData = { key1: 'value1', key2: 'value2' }; // Set up options for the fetch request const options = { method: 'POST', headers: { 'Content-Type': 'application/json' // Set content type to JSON }, body: JSON.stringify(jsonData) // Convert JSON data to a string and set it as the request body }; // Make the fetch request with the provided options fetch('https://api.example.com/upload', options) .then(response =>{ // Перевірте, чи запит був успішним if (!response.ok) { throw new Error('Відповідь мережі була неправильною'); } // Проаналізувати відповідь як JSON return response.json(); }) .then(data => { // Обробка даних JSON console.log(data); }) .catch(error => { // Обробка будь-яких помилок, які виникли під час отримання console.error('Fetch error: ', помилка });> Пояснення:
- Ми визначаємо ваші дані JSON.
- Ми встановлюємо параметри для запиту на вибірку, зокрема для методу встановлено значення «POST», для заголовка Content-Type встановлено значення «application/json», а для тіла встановлено рядкову версію ваших даних JSON.
- Ми робимо запит на вибірку з наданими параметрами за допомогою функції fetch().
- Решта коду залишається такою ж, як і раніше, обробляючи відповідь і будь-які помилки, які виникають під час отримання.
3. Переривання запиту на вибірку
Ви можете використовувати AbortController і Інтерфейс AbortSignal щоб скасувати запит на вибірку в JavaScript.
unix створити каталогJavascript
// Create a new AbortController instance const controller = new AbortController(); const signal = controller.signal; // Make the fetch request with the signal const fetchPromise = fetch('https://api.example.com/data', { signal }); // Timeout after 5 seconds const timeoutId = setTimeout(() =>{ controller.abort(); // Переривання запиту на вибірку console.log('Час очікування запиту на вибірку минув'); }, 5000); // Обробка запиту на вибірку fetchPromise .then(response => { // Перевірити, чи запит був успішним if (!response.ok) { throw new Error('Network response was not OK'); } // Проаналізувати відповідь як JSON return response.json(); }) .then(data => { // Обробка даних JSON console.log(data); }) .catch(error => { // Обробка будь-яких помилок, які виникли під час fetch console.error('Fetch error:', error); }) .finally(() => { clearTimeout(timeoutId); // Очистити час очікування });> Пояснення:
- Ми створюємо новий екземпляр AbortController і отримуємо його сигнал.
- Ми робимо запит на вибірку за допомогою fetch() із наданими параметрами.
- Ми встановлюємо тайм-аут у 5 секунд за допомогою setTimeout(), щоб перервати запит на вибірку, якщо він займає надто багато часу.
- У зворотному виклику тайм-ауту ми викликаємо controller.abort(), щоб перервати запит на вибірку.
- Ми обробляємо запит на вибірку як зазвичай, включаючи розбір відповіді та обробку будь-яких помилок.
- Нарешті, у блоці finally() ми очищаємо тайм-аут за допомогою clearTimeout(), щоб запобігти запуску тайм-ауту, якщо запит на вибірку завершується до закінчення тайм-ауту.
Надсилання запиту з обліковими даними
Щоб надіслати запит із обліковими даними, наприклад файли cookie , у запиті на вибірку ви можете встановити властивість облікових даних для включення.
fetch('https://example.com', { credentials: 'include', });>Якщо ви хочете надіслати облікові дані, лише якщо URL-адреса запиту має те саме джерело, що й сценарій виклику, додайте облікові дані: «same-origin».
// The calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin', });>Варіанти використання методу JavaScript fetch().
Ось деякі випадки використання методу fetch. Це поширені проблеми, з якими стикаються розробники-початківці під час роботи з пошуком.
1. Як використовувати JavaScript Fetch API для отримання даних
Запит JavaScript Get використовується для отримання даних із сервера. Щоб використовувати API Fetch у JavaScript для отримання даних із сервера, ви можете зробити запит GET до потрібної URL-адреси та обробити відповідь.
2. Метод Get and Post за допомогою Fetch API
Метод fetch() можна використовувати з будь-яким типом запиту, наприклад ПОСТ , ОТРИМАТИ , ПОСТАВИТИ, і ВИДАЛИТИ , Метод GET використовує fetch API
3. Різниця між Fetch і Axios для створення http-запитів
Axios — це окремий сторонній пакет, який можна легко встановити, а Fetch вбудований у більшість сучасних браузерів; установка як така не потрібна.
Підтримувані браузери:
JavaScript Fetch – це ECMAScript6 (ES6) і підтримується майже всіма сучасними браузерами, наприклад:
- Гугл хром
- Край
- Firefox
- Опера
- Сафарі