Vue之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
},

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

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

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

这个问题解决后，又出现了一个新的问题，就是我在这里不是返回了一个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异步请求冲突的时候可以参考本篇文章进行解决

到此这篇关于Vue之Axios的异步请求问题详解的文章就介绍到这了,更多相关Vue Axios异步请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue使用axios发送请求简单实现代码

    上一篇文章我们在vue工程项目中引入了axios库并将通用的API进行了封装,但是遇到了一个问题就是我们在组件内部写的函数发送请求是不会被vue实例进行执行的,也就是说VC中的函数无法直接的由VM去接管执行,这时我们需要将这个请求的执行函数位置调到APP这个父组件上去,因为只有APP组件被所谓的VM给接管了的,其他的组件都是APP组件的子组件. 例:当我们在APP组件的子组件UserLogin组件中写到登录函数: login(){ console.log('登录') let params = {

  • Vue通过axios发送ajax请求基础演示

    在Vue中是不支持发送ajax请求的,如果我们要在Vue中发送ajax请求,我们需借助第三方插件常用发送ajax请求插件有两个 vue-resource和axios,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. axios项目源码 https://github.com/axios/axios axios引入方式 npm方式: npm install axios bower方式 bower install axios yarn方式 yarn add axios CDN方

  • Vue axios库避免重复发送请求的示例介绍

    目录 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入 // 引入 axios import axios from 'axios'; // 请求配置单独写一个文件 baseurl.js import serverConfig from './baseurl.js' 创建一个实例 cons

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

  • Vue如何处理Axios多次请求数据显示问题

    目录 Vue处理Axios多次请求数据显示 服务端代码 客户端代码 vue axios多次请求一个接口取消前面请求 方法一 方法二 总结 Vue处理Axios多次请求数据显示 场景: 一个搜索框,要求用户输入内容改变之后立即进行搜索 遇到的问题: 用户频繁的进行搜索词修改,会触发很多次搜索请求,如果请求有延时,就会出现显示不正确的现象 比如下面这个例子: 请求1发出后,存在延时大,响应1后返回: 请求2发出后,延时小,响应2先返回: 最后显示的内容是响应1: 而我期待的显示内容,是最后一次的请求

  • Vue简单封装axios网络请求的方法

    Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • Vue3中如何使用异步请求示例详解

    Vue3中如何使用异步请求示例详解

    目录 1.前言 2.快速开始 2.1.思路 2.2.安装&封装axios 2.3.设计接口 2.4.设计视图 2.5.最终效果 总结 1.前言 接上节,我们初步体验了layui-vue的用法.相比其他ui框架,layui-vue的数据结构显得不是非常友好,但是经过数据拼凑也是能够成功运行的. 今天我们就主要介绍下在实际开发中最常用到的前后端接口交互.因为大多数时候前端为了高性能,对于后端接口的调用都会采用异步的方式.那该如何在vue3中使用异步请求渲染页面呢? 2.快速开始 2.1.思路 预期:

  • Vue动态组件与异步组件实例详解

    Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • 基于Typescript与Axios的接口请求管理详解

    目录 思路 请求拦截 响应拦截 使用httpClient.ts定义请求 在组件中请求接口 总结 本文主要介绍基于TS和AXIOS的接口请求封装 思路 请求拦截 在请求头添加一些参数,例如token,uid等 判断用户登录状态,如果没有登录,直接跳转登录 处理请求数据转换发送请求的数据格式,json→urlencoded (可选的) 响应拦截 判断后端响应的业务状态码,进行不同的处理 例如用户登录状态过期,直接跳转登录 统一的报错提示 先把套路化的代码写出来: import axios, { Ax

  • Vue动态组件和异步组件原理详解

    前言 在vue官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步"组件,经过大量的时间研究和技术分析,我们给出目前比较合理的技术实现方式,并分析一下vue动态异步组件的原理 动态组件 & 异步组件的存在,使得我们更方便地控制首屏代码的体积,加快加载速度. 抛开具体细节不谈,一个普通 Vue 组件从创建到展现在页面里,主要经历了以下流程: // 组件 Object

  • vue中如何进行异步请求

    vue中如何进行异步请求

    目录 如何进行异步请求 一.axios实现异步请求 二.vue-resource实现异步请求(和axios步骤基本相同) vue接口异步请求 其他方法 如何进行异步请求 一.axios实现异步请求 1.项目中安装axiox npm install --save axios 2.在main.js中引入以供全局使用 import axios from 'axios' //可以给axios的ajax请求设置统一的主机和端口号 axios.defaults.baseURL = "http://157.1

  • Vue Ajax跨域请求实例详解

    一.设置config/index.js || proxyTable添加 proxyTable: { '/api': { target: 'http://192.168.48.239:8080/ydzl', changeOrigin: true, pathRewrite: { '^/api': '' } } 二.mian.js 添加vue全局属性 Vue.prototype.HOST = '/api' 三.如果是post的话 1.修改数据格式 transformRequest: [function

  • Vue中Axios中取消请求及阻止重复请求的方法

    Vue中Axios中取消请求及阻止重复请求的方法

    目录 阻止请求目的: 常见情况: 新建 axios.js 文件 全局 main.js 引入 阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复发送多次请求. 常见情况: PC端:输入框搜素,多次请求接口移动端:移动端很容易造成误操作或多操作请求(移动端没有点击延迟)注意:有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router fro

  • Vue取消Axios发出的请求

    Vue取消Axios发出的请求

    目录 一.前言 二.AbortController 三.CancelToken 一.前言 有的时候我们需要取消axios发出的请求,例如在退出页面时,取消掉仍然在进行的请求. 二.AbortController mdn中AbortController的介绍. 从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求: const controller = new AbortController(); axios.get('/foo/ba

  • Vue+Vuex实现自动登录的知识点详解

    在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization 二.我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个A

随机推荐