Как использовать метод fetch() для выполнения нескольких вызовов API с помощью vanilla JavaScript
Иногда вам нужно вызвать API, а затем использовать данные, которые вы получаете от этого API, для вызова другого метода по цепочке.
Пример
Например, предположим, что вы хотите получить конкретную запись с использованием /posts конечной точки.
fetch('https://jsonplaceholder.typicode.com/posts/5');
API возвращает идентификатор автора сообщения, но без дополнительной информации.
var data = {
userId: 1,
id: 5,
title: "nesciunt quas odio",
body: "repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque"
};Если вы хотите взять эти данные и отобразить сообщение в пользовательском интерфейсе с информацией об авторе, вам необходимо вызвать другой API метод /users - и передать ему userId в качестве параметра.
fetch('https://jsonplaceholder.typicode.com/users/' + data.userId);
Вложенные методы fetch()
Поскольку метод fetch() возвращает Promise, вы можете выполнить return в методе then(), и следующий метод then() в цепочке будет запущен после его разрешения.
Используя наш пример выше, мы сначала вызовем наш /posts. Затем мы сохраним возвращенный ответ в переменной с именем post.
Далее мы сделаем return и вернем новый вызов fetch() к /users, используя свойство data.userId как часть вызова API метода. как только он разрешается, у нас есть обе части данных, которые нам нужны для визуализации нашего пользовательского интерфейса.
На данный момент, давайте просто выведем post и userData объекты в консоль.
var post;
fetch('https://jsonplaceholder.typicode.com/posts/5').then(function (response) {
if (response.ok) {
return response.json();
} else {
return Promise.reject(response);
}
}).then(function (data) {
post = data;
return fetch('https://jsonplaceholder.typicode.com/users/' + data.userId);
}).then(function (response) {
if (response.ok) {
return response.json();
} else {
return Promise.reject(response);
}
}).then(function (userData) {
console.log(post, userData);
}).catch(function (error) {
console.warn(error);
});Если вы хотите вызывать несколько вызовов API одновременно, лучше использовать метод Promise.all() как на примере ниже:
Promise.all([
fetch('https://jsonplaceholder.typicode.com/posts'),
fetch('https://jsonplaceholder.typicode.com/users')
]);
