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

Я создал кнопку IG like, где количество like меняется после нажатия. Я добавил 2 функции выборки - одну с PUT. Я пробовал несколько способов, но результат один и тот же - сначала выполняется выборка GET. Как это предотвратить? 

function liking(tweetid) {

    let l = document.querySelector('#numlikes-' + tweetid);

    fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    });
    
    fetch(`tweets/${tweetid}`)
    .then(response => response.json())
    .then(post => {
        l.innerHTML = post.likes;
    });

}

fetch является асинхронной функцией. Это означает, что вы не можете предсказать, какой ответ fetch вы получите первым. Чтобы она вызывалась по порядку, необходимо вызвать GET fetch в обратном вызове ответа PUT fetch.

function liking(tweetid) {

    let l = document.querySelector('#numlikes-' + tweetid);

    fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    }).then(() => {
           fetch(`tweets/${tweetid}`)
           .then(response => response.json())
           .then(post => {
              l.innerHTML = post.likes;
           });
    })

}

Javascript - синхронный язык, строка кода по умолчанию не ждет завершения предыдущей строки. Для почти мгновенных операций это не важно и не будет иметь значения. Здесь, поскольку выборка должна взаимодействовать с сервером, вторая выборка начинается, не дождавшись завершения первой. Есть два простых решения для решения этой проблемы

Использование async await

С ES6 у нас есть возможность использовать async await:

async function liking(tweetid) {

    let l = document.querySelector('#numlikes-' + tweetid);

    await fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    });
    
    await fetch(`tweets/${tweetid}`)
    .then(response => response.json())
    .then(post => {
        l.innerHTML = post.likes;
    });

}

Цепочка с .then: 

function liking(tweetid) {

    let l = document.querySelector('#numlikes-' + tweetid);

    fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    }).then(() => {
      fetch(`tweets/${tweetid}`)
      .then(response => response.json())
      .then(post => {
          l.innerHTML = post.likes;
      });
    });
    
}
Вернуться на верх