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

问题原因 #

fetch 是异步API，你当前的写法是并行发送PUT和GET两个请求，GET请求本身没有额外请求体、服务端处理逻辑更轻，所以基本都会比PUT先得到响应，拿到的是点赞更新前的旧数据。

解决方法 #

你需要保证GET请求在PUT请求执行完成之后再触发，有两种常用写法：

写法1：把GET放到PUT的.then回调中 #

function liking(tweetid) {
    let l = document.querySelector('#numlikes-' + tweetid);
    fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    })
    // 等PUT请求完成后再执行GET
    .then(() => fetch(`tweets/${tweetid}`))
    .then(response => response.json())
    .then(post => {
        l.innerHTML = post.likes;
    });
}

写法2：用async/await语法，逻辑更清晰 #

async function liking(tweetid) {
    let l = document.querySelector('#numlikes-' + tweetid);
    // 等待PUT请求完成
    await fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    });
    // 再发GET请求拿更新后的数据
    const res = await fetch(`tweets/${tweetid}`);
    const post = await res.json();
    l.innerHTML = post.likes;
}

优化建议 #

如果你的后端接口支持，可以直接让PUT请求在处理完点赞逻辑后，直接返回更新后的点赞数，这样你不需要额外发一次GET请求，减少多余的网络请求，性能更好：

async function liking(tweetid) {
    let l = document.querySelector('#numlikes-' + tweetid);
    const res = await fetch(`tweets/${tweetid}`, {
        method: 'PUT',
        body: JSON.stringify({
            tweet_like: 1
        })
    });
    const post = await res.json();
    l.innerHTML = post.likes;
}

提示：建议补充.catch逻辑捕获请求异常，避免网络波动、接口报错时页面没有对应反馈。

内容的提问来源于stack exchange，提问作者abhiramrp