当第一个使用异步、Javascript 完成时，如何运行第二个 fetch 函数？答案

【问题标题】：How to run the second fetch function when the first one is finished with async, Javascript?当第一个使用异步、Javascript 完成时，如何运行第二个 fetch 函数？
【发布时间】：2021-12-09 18:43:11
【问题描述】：

所以我有两个从 API 获取数据的函数。其中一个更新待办事项完成，另一个获取待办事项列表。目前UpdateAndFetch()函数滞后，有时返回未更新的列表。

我该如何解决这个问题？

进行 API 调用的函数

let base = import.meta.env.VITE_API_BASE

// fetch the todos that belong to groupId
export async function TESTFetchTodosFromGroup(groupId, todos, groupName) {
  let url = `${base}/todos/group/${groupId}`
  fetch(url).then(async (response) => {
    const json = await response.json()
    todos.value = json.data
    groupName.value = json.message

    if (!response.ok) {
      return Promise.reject(error)
    }
  })
}

//
export async function TESTupdateCompletion(todo) {
  //
  let url = `${base}/todos/completion/${todo.todoId}`
  var requestOptions = {
    method: 'PATCH',
    redirect: 'follow',
  }

  fetch(url, requestOptions)
    .then((response) => response.json())
    .then((result) => console.log(result))
    .catch((error) => console.log('error', error))
}

组件内部的功能

async function UpdateAndFetch(todo, groupId) {
  const updateTodoCompletion = await TESTupdateCompletion(todo)
  const updateTodoList = await TESTFetchTodosFromGroup(groupId, todos, groupName)
}

【问题讨论】：

标签： javascript api async-await fetch

【解决方案1】：

没关系，找到解决方法了。

将 fetch 函数包装为返回值

 // fetch the todos that belong to groupId
 export async function fetchTodosFromGroup(groupId, todos, groupName) {
   let url = `${base}/todos/group/${groupId}`
   // you need to wrap the fetch into return so that the awaits would work !
   return fetch(url).then(async (response) => {
     const json = await response.json()
     todos.value = json.data
     groupName.value = json.message

     if (!response.ok) {
       return Promise.reject(error)
     }
   })

   // Promise.resolve('done')
 }

 //
 export async function updateTodoCompletion(todo) {
   //
   let url = `${base}/todos/completion/${todo.todoId}`
   var requestOptions = {
     method: 'PATCH',
     redirect: 'follow',
   }

   // you need to wrap the fetch into return so that the awaits would          work !
   return (
     fetch(url, requestOptions)
       .then((response) => response.json())
       .then((result) => console.log(result))
       // .then(() => TESTFetchTodosFromGroup())
       .catch((error) => console.log('error', error))
   )
 }

重构执行函数的函数

 // delete the todo and fetch the list
 async function UpdateAndFetch(todo, groupId) {
   await updateTodoCompletion(todo)
   await fetchTodosFromGroup(groupId, todos, groupName)
 }

【讨论】：

【解决方案2】：

您总是必须返回一个 fetch 函数，否则它不会将值传递给下一个异步调用。

为了能够一一执行函数，您可以在调用函数的地方执行此操作。

async function UpdateAndFetch(todo, groupId) {
Promise.resolve(() => updateTodoCompletiong(todo)).then(response => fetchTodosFromGroup(groupId,todos,groupName))
 }

之后，您可以捕获错误。

您可以在此处阅读文档，这对 javascript 提供的内容非常有帮助。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

如果有任何问题也可以发表评论。

【讨论】：