Как делать последовательные ajax/fetch запросы правильно?

Question

именно дождаться ответа предыдущего и потом только запускать следующий

Answer 1

вам нужно изучить тему async/await например здесь (т.к. для одного ответа это обширная тема). Это позволяет делать асинхронные запросы, дожидаясь ответа от предыдущего. Фрагмент кода из статьи выше:

async function showAvatar() {
/*****************************************/
// запрашиваем JSON с данными пользователя
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
// запрашиваем информацию об этом пользователе из github
  let githubResponse = await fetch(https://api.github.com/users/${user.name});
  let githubUser = await githubResponse.json();
/*****************************************/
// отображаем аватар пользователя
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);
// ждём 3 секунды и затем скрываем аватар
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));
img.remove();
return githubUser;
}
showAvatar();