JavaScript中如何在第一个异步fetch执行完成后再运行第二个fetch函数

问题根因 #

你的执行滞后、拿到未更新列表的问题，核心是两个封装的API函数没有正确返回Promise实例，导致await没有真正等待异步请求完成，就执行了后续拉取列表的逻辑，相当于更新请求还没处理完，就已经去拉了旧数据。

具体需要修改的点 #

• 两个标注了async的API函数内部没有返回fetch生成的Promise链，函数执行完直接返回undefined，await对这类空返回的异步函数会立刻放行，不会等请求结束
• TESTFetchTodosFromGroup的错误处理顺序错误，应该先判断响应状态是否正常，再解析响应体，同时原代码中抛出的error变量未定义
• TESTupdateCompletion没有返回请求Promise，也没有向上抛出异常，调用方无法感知请求是否成功

修复后的代码 #

发起API调用的函数

let base = import.meta.env.VITE_API_BASE

// 获取对应groupId的待办列表
export async function TESTFetchTodosFromGroup(groupId, todos, groupName) {
  let url = `${base}/todos/group/${groupId}`
  // 新增return返回Promise链
  return fetch(url).then(async (response) => {
    // 先判断响应状态
    if (!response.ok) {
      return Promise.reject(new Error('请求待办列表失败'))
    }
    const json = await response.json()
    todos.value = json.data
    groupName.value = json.message
  })
}

// 更新待办完成状态
export async function TESTupdateCompletion(todo) {
  let url = `${base}/todos/completion/${todo.todoId}`
  var requestOptions = {
    method: 'PATCH',
    redirect: 'follow',
  }
  // 新增return返回Promise链，同时把异常向上抛出
  return fetch(url, requestOptions)
    .then((response) => response.json())
    .then((result) => console.log(result))
    .catch((error) => {
      console.log('error', error)
      throw error
    })
}

组件内的函数（可选优化：增加异常捕获）

async function UpdateAndFetch(todo, groupId) {
  try {
    await TESTupdateCompletion(todo)
    await TESTFetchTodosFromGroup(groupId, todos, groupName)
  } catch (err) {
    // 这里可以加全局错误提示逻辑
    console.error('操作失败', err)
  }
}

补充说明 #

如果修复后还是偶现拿到旧数据的问题，大概率是服务端数据库主从同步有延迟，可以临时在更新请求成功后加100-200ms的延迟再拉取列表，本质需要服务端优化接口一致性。

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