Как запустить вторую ф-цию после получения данных с первой?

Question

[kuzubina]

Есть вот такой код вынесен в отдельную ф-цию т.к. может встречаться несколько раз в скрипте и имеет значительно больше кода (тут упростил для примера), где делает fetch запрос, получает и обрабатывает некоторые данные и пушит их в новый массив

const arr =[]
function getData() {
	arr.length = 0;
	fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => {
    	let data = {
    		id: json.id,
    		name: json.name,
    		age: json.age
    	}
    	arr.push(data)
    })
}

ниже идет пример самого скрипта (тоже упрощен для примера)

getData();

setTimeout(function(){
	fetch('https://jsonplaceholder.typicode.com/todos/2')
	.then(response => response.json())
	.then(json => {
		console.log(`${arr[0].name} - ${json.product}`)
	})
}, 1000)

вызываем выше указанную функцию и опять делаем fetch запрос для получения других данных и дальше уже обрабатываем данные с первого и второго запроса.

Проблема в том, что сейчас второй запрос обернут в setTimeout() для того чтобы первый запрос успел отработать и получить данные, но не всегда успевает это сделать, весь скрипт циклически запускается каждые n секунд и бывает что первый не успевает еще получить данные а второй уже выполняется и в массиве arr лежат старые данные. Как сделать так, чтобы второй запрос не выполнялся пока не выполнится первый запрос?

Answer 1

[MSAFT]

Воспользуйтесь async/await

Что-то вроде такого:

async function() {
await getData();
await secondFunction();
}

Answer 2

[Mikhail Osher]

function fetchTodo(id) {
  return fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then(response => response.json());
}

fetchTodo(1)
  .then((first) => {
    fetchTodo(2).then((second) => {
      console.log(`${first.name} - ${second.product}`);
    });
  });