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

关键词：

【中文标题】如何使用 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（从未在实际中使用过）。再次感谢，是一个很大的帮助

async/await 在名为“then”的类方法中

...同的目的，并且不返回承诺。我正在尝试在Typescript2.1.4中编写一个async/await函数来等待并返回此类的一个实 查看详情

在 async/await 之后使用 .then 是一种好方法吗？

】在async/await之后使用.then是一种好方法吗？【英文标题】：Isitgoodwaytouse.thenafterasync/await?【发布时间】：2019-12-0116:57:23【问题描述】：我有react-native/graphql/apollo应用程序。用户发出请求以从服务器获取凭据，并在通过async/await将... 查看详情

如何在 mongoose 中使用 async/await

】如何在mongoose中使用async/await【英文标题】：Howtouseasync/awaitwithmongoose【发布时间】：2019-07-2007:08:29【问题描述】：在node.js中我有如下代码：mongoose.connect(dbURI,dbOptions).then(()=>console.log("ok");,err=>console.log(\'error:\'+err));现在我想... 查看详情

如何测试使用 async/await 的方法？

】如何测试使用async/await的方法？【英文标题】：Howtotestamethodthatusesasync/await?【发布时间】：2018-06-2900:40:53【问题描述】：我看过很多关于如何在单元测试中使用async/await的文章，但我的需求正好相反。如何为使用async/await的方法... 查看详情

使用 async/await 的 mongodb 连接 - NodeJS

....then()进行MongoDB连接，因为这就是我在过去根据文档学习如何操作的方法。这是使用asyncawait的正确方法吗？constexpress=require(\'express\');constmon 查看详情

如何使用 async/await 查询 MongoDB？

】如何使用async/await查询MongoDB？【英文标题】：HowtoqueryMongoDBusingaysnc/await?【发布时间】：2022-01-1103:47:02【问题描述】：所以我正在学习Udemy的课程，学习使用Node/Express/MongoDB和使用mongoose与数据库交互的Web开发。我参加了一个讲... 查看详情

Async / await vs then 哪个最适合性能？

...么。还有哪一个被推荐为这些天的好习惯？第一个选项是使用.t 查看详情

使用 Async/Await 编写基于 Promise 的 HTTP 请求

】使用Async/Await编写基于Promise的HTTP请求【英文标题】：WritingpromisebasedHTTPrequestusingAsync/Await【发布时间】：2018-01-2222:17:08【问题描述】：是否可以重写Node手册中的以下HTTP请求示例以使用Async/Await而不是Promise？我熟悉使用resolve/rej... 查看详情

.save() 无法使用 async/await 正确保存到 mongoDB

...给“用户”。它适用于.then()语法，但我似乎无法弄清楚如何使用async/await使其工作。帖子已创建，当我查看应该将其保存到的用户时 查看详情

async/await小知识点

一、使用async修饰的函数，返回的内容就是一个Promise，因此可以使用Promise对象所有的方法，如then等二、在async函数中使用await是否会影响其他代码的执行，答案是：不会。  查看详情

在带有 supertest 的 mocha 断言中使用 async await 函数

】在带有supertest的mocha断言中使用asyncawait函数【英文标题】：usingasyncawaitfunctioninmochaassertionwithsupertest【发布时间】：2020-06-1312:29:36【问题描述】：我正在尝试使用Mocha和Supertest为我的NodeAPI编写测试。我通过.then成功使用了Promise... 查看详情

async和await总结

sync和await1.作用?简化promise对象的使用:不用再使用then()来指定成功/失败的回调函数以同步编码(没有回调函数了)方式实现异步流程2.哪里写await?在返回promise的表达式左侧写await:不想要promise,想要promise异步执行的成功的value数据3.哪... 查看详情

Flutter/Dart 中的 Future<void>, async, await, then, catchError

】Flutter/Dart中的Future<void>,async,await,then,catchError【英文标题】：Future<void>,async,await,then,catchErrorinFlutter/Dart【发布时间】：2020-06-1921:07:45【问题描述】：有什么区别：未来，异步，等待，然后，catchErrorFuture<void>copyToClip... 查看详情

async与await的使用

async/await时ES7引入的新语法，async关键字用于函数上（async函数的返回值时Promise实例对象），await关键字用于async函数中（await可以得到异步的结果）asyncfunctionqueryData()varres=awaitnewPromise(function(resolve,reject)setTimeout(function()resolve(‘kun&... 查看详情

浅谈async/await(代码片段)

...await语法在2016年就已经提出来了，惭愧的是我最近才接触使用，，下面来聊聊解决了什么问题在async/await之前，我们有三种方式写异步代码嵌套回调以Promise为主的链式回调使用Generators但是，这三种写起来都不够优雅，ES7做了优... 查看详情

Firebase：Flutter：避免事务崩溃 CloudFirestorePlugin.java:613 : .then() vs async/await

...ebase：Flutter：避免事务崩溃CloudFirestorePlugin.java:613:.then()vsasync/await【英文标题】：Firebase:Flutter:AvoidingTransactioncrashesCloudFirestorePlugin.java:613:.then()vsasync/await【发布时间】：2020-09-2105:55:39【问题描述】：由于事务和侦听器，我的应用... 查看详情

promise/async/await(代码片段)

目录1、promise基础语法1.1、概念1.2、promise的执行方式1.2.1、成功1.2.2、失败1.2.3、概念中的第7条1.2.4、newPromise(resolve=>).then().then()1.2.5、Promise.resolve(1).then().then()，reject同理1.2.6、顺延和catch1.2.7、all和race2、as 查看详情

async/await函数

一、async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。二、async表示函数里有异步操作，await表示紧跟在后面的表... 查看详情