DevGang
Авторизоваться

Как использовать метод 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')
]);

Источник:

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу