解决axios异步请求问题(异步变为同步)

这篇具有很好参考价值的文章主要介绍了解决axios异步请求问题(异步变为同步)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

遇到的问题

在目前一个需求中,我需要等待axios请求完成后,判断请求是否出现异常,然后来判断是否关闭弹窗

修改后大概代码如下:

async submitForm() {
  let flag = false
  //表单验证,默认通过
  let formValidation = true
  this.$refs['vForm'].validate(valid => {
    if (!valid){
      formValidation = false
    }
    //TODO: 提交表单
  })
  if (formValidation === true){
    //这里需要使用await,否则不会等待该方法运行完成
    await insertIllegalInfo(this.formData).then(res=>{
      this.$message.success("新增成功")
      flag = true
      console.log("新增成功了")
      console.log(flag)
    })
  }
  console.log("提交马上返回了")
  console.log(flag)
  return flag
},

原来在方法中没有使用asyncawait,由于发送的axios请求是异步请求,所以在请求还没完成的时候submitForm这个方法就已经将flag返回了

这就导致了一个问题,如果我在后端在处理请求的时候出现异常,我在这里无法进行处理

经过百度搜索,发现使用async+await能够解决该问题,将异步方法改为同步方法,在方法前面加上async进行修饰,然后在axios请求前使用await进行修饰即可,这样就不会出现异步的问题

解决axios异步请求问题(异步变为同步)

这个问题解决后,又出现了一个新的问题,就是我在这里不是返回了一个flag吗,我在另外一个vue页面中需要获取到return返回的这个flag,但是按照正常步骤获取不到

后来经过查询资料后发现了原因,如下:

  • async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。

  • await 也是一个修饰符,await 关键字 只能放在 async 函数内部, await关键字的作用 就是获取 Promise中返回的内容, 获取的是Promise函数中resolve或者reject的值。

  • async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。

  • async/await 是建立在 promise 的基础上。(如果对Promise不熟悉,我已经着手在写Promise的文章了)

  • async/await 像 promise 一样,也是非阻塞的。

  • async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。

主要原因就是async 定义的函数会默认的返回一个Promise对象resolve的值,所以我们需要使用then去进行取值,如下

submitInsertIllegalInfoDialog(){
    //重要的是这里,这里调用了上面说的的submitForm方法
  this.$refs.insertIllegalInfoDialog.submitForm().then(flag=>{
      
    console.log(flag)
    if (flag === true){
      console.log("马上关闭弹窗了")
        //这个是来关闭弹窗的
      this.insertIllegalInfoDialogVisible = false
        
      console.log("重新查询")
      this.getIllegalInfoList()
      this.$refs.insertIllegalInfoDialog.resetForm();
    }
  })

},

总结

学会async和await的使用能够让我在开发vue项目的时候更加灵活,之后在遇到axios异步请求冲突的时候可以参考本篇文章进行解决文章来源地址https://www.toymoban.com/news/detail-437631.html

到了这里,关于解决axios异步请求问题(异步变为同步)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微风·六:RequestOptions:请求方式(同步/异步)探究,及异步方式问题抛出

    在使用ES高级客户端向ES服务器发送请求,使用同步请求方式创建索引库时,有段代码 RequestOptions.DEFAULT ,经查阅特指同步调用方式,当然会有异步调用。 调用方式 解释 同步方式 ① 以同步方式执行IndexRequest时,客户端必须等待返回结果IndexResponse;② 在收到IndexResponse后,客

    2024年02月03日
    浏览(33)
  • Ajax 与 Axios 异步请求

    1. 网页中如何请求数据 2. 资源的请求方式 客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。 get 请求通常用于获取服务端资源(向服务器要资源) post 请求通常用于向服务器提交数据(往服务器发送资源) 1. 什么是Ajax 2. 为什么要学

    2024年03月28日
    浏览(51)
  • 前端同步异步讲解--Ajax(axios进阶)的相关操作

    之前我们讲到了数据在前后端传输是依赖xml文件,但是由于时代变迁,他也已经比逐步淘汰,json对象就逐步开始作为数据传输通道的桥梁,忘记的话可以去回顾文章对应的json对象 最全的前端知识之css与jsp介绍-CSDN博客 文章浏览阅读1k次,点赞31次,收藏21次。ok了,宝子们,

    2024年02月21日
    浏览(64)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(53)
  • Day19-异步请求-axios文件上传

    2024年02月11日
    浏览(36)
  • vue中的异步请求Axios(个人学习笔记五)

    先看文章目录,大致了解知识点结构,直接点击文章目录可以跳转到文章指定位置。 ①传统的Ajax请求是基于XMLHttpRequest(XHR)对象。可以直接使用。但是使用起来配置较为麻烦,实际开发中使用非常少,在MVC时代通常使用的是JQuery-Ajax。相对于传统的Ajax现在使用更多的是Fe

    2024年02月15日
    浏览(31)
  • 记录--如何解决异步请求中的返回值问题

    在 Web 开发中,异步请求是一个常见的操作。然而,在异步请求中正确地获取返回值却可能会变得棘手。本文将介绍如何解决异步请求中的返回值问题,并提供一种解决方案。 在某个 Web 应用程序中,用户遇到了无法正确获取异步请求返回值的问题。具体来说,用户在第一个

    2024年02月08日
    浏览(33)
  • Vue 网络处理 - axios 异步请求的使用,请求响应拦截器(最佳实践)

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(43)
  • Tauri发送网络请求系列,接口请求封装并遇到的问题解决办法

    接口请求处理 项目中没有使用 axios 等前端 HTTP 请求库,使用的是 Tauri 内置的 fetch 方法,但该方法使用比较简单,没有请求拦截器或响应拦截器相关配置,所以我们有必要在此基础上做下二次封装。  红框选中的内容是必须改的,不然会发生跨域: 新建  utils/http.ts  文件

    2024年02月14日
    浏览(40)
  • SpringBoot 同步和异步网络请求

    本文主要介绍springboot下的一些网络请求方式,包含同步请求和异步请求。 这种方式是同步请求。 此处再次介绍同步和异步的区别: 同步,是指一个任务接着一个任务,当上一个任务完成时,才可以开启下一个任务。在网络请求中是指,当向网络服务器发送网络请求时,服务

    2023年04月08日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包