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异步请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue.js实现图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
electron-vue 运行报错 Object.fromEntries is not a function
Object.fromEntries() 是 ECMAScript 2019 新增的一个静态方法，用于将键值对列表（如数组）转换为对象，如果在当前环境中不支持该方法，可以使用 polyfill 来提供类似功能，接下来通过本文介绍electron-vue 运行报错 Object.fromEntries is not a function的解决方案2023-05-05
本文主要介绍，通过使用基于 vue技术栈的前端开发技术，在浏览器端调起摄像头，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理，对vue浏览器扫码功能的实现代码感兴趣的朋友一起看看吧2021-10-10
这篇文章主要介绍了解决vue-cli中stylus无法使用的问题方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Vue用Export2Excel导出excel,多级表头数据方式
这篇文章主要介绍了Vue用Export2Excel导出excel,多级表头数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue draggable resizable 实现可拖拽缩放的组件功能
这篇文章主要介绍了vue draggable resizable 实现可拖拽缩放的组件功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
VUE使用localstorage和sessionstorage实现登录示例详解
这篇文章主要为大家介绍了VUE使用localstorage和sessionstorage实现登录示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Vue中keep-alive 实现后退不刷新并保持滚动位置的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
最新评论