如何让多个fetch函数按顺序执行？

我创建了一个 IG 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;
    });

}

Javascript是同步语言，一行代码默认不等待前一行完成。通过近乎即时的操作，这并不重要，也不会产生影响。由于提取需要与服务器通信，因此在第一个提取完成之前，您的第二个提取将开始。有两个简单的解决方案可以解决这个问题

使用异步等待

从 ES6 开始，我们能够使用 async wait：

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;
      });
    });
    
}