如何使用 async/await 编写 .then 函数，以便捕获来自 axios 的响应（在单独的文件和方法中，在 vue 中）

Posted 2023-03-28

【中文标题】如何使用 async/await 编写 .then 函数，以便捕获来自 axios 的响应（在单独的文件和方法中，在 vue 中）

【英文标题】：How can I write a .then function with async/await, so that I can catch the response from axios (in seperate files and methods, in vue)

【发布时间】：2021-07-19 22:27:05

【问题描述】：

我的目标是从 axios 请求中捕获响应，这与 .then 配合得很好，但我想使用 async/await，因为它是一种具有很多好处的新方法。 （update方法被多次调用）

如何使用 async/await 转换我的 saveEdit 方法（从更新方法中获取响应），以便我可以捕获来自 axios 的响应。

我的.vue文件的方法：

...
saveEdit (event, targetProperty, updateValue) 
  this.update(this[updateValue])
    .then((result) => 
      if (result.status === 200) 
        this.fetchData()
        this.cancelEdit()
      
    )

...

我的商店模块的功能： （api是axios的handler，基本都是axios....）

update ( commit, rootGetters , details) 
  ...
  const requestUrl = `some adress`
  return api
    .patch(
      requestUrl,
      validatedDetails
    )
    .then(response => 
      return response
    )
    .catch(error => 
      return Promise.reject(error)
    )

与该问题相关的其他 *** 帖子确实回答了我的问题，因为在示例中是在一个文件和一种方法中。

提前致谢

【参考方案1】：

你可以试试这样的：

update ( commit, rootGetters , details) 
  ...
  const requestUrl = `some adress`
  return api.patch(
      requestUrl,
      validatedDetails
    )

和：

async saveEdit (event, targetProperty, updateValue) 
  try 
    const result = await this.update(this[updateValue])
    if (result.status === 200) 
      this.fetchData()
      this.cancelEdit()
    
   catch (error) 
    // handle api call error
  

【讨论】：

太好了，这正是我想要的。我完全忘记了 try/catch（从未在实际中使用过）。再次感谢，是一个很大的帮助