目录遇到的问题总结遇到的问题 在目前一个需求中,我需要等待axiOS请求完成后,判断请求是否出现异常,然后来判断是否关闭弹窗 修改后大概代码如下: async submitFORM(
在目前一个需求中,我需要等待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 定义的函数会默认的返回一个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异步请求内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue之Axios的异步请求问题详解
本文链接: https://www.lsjlt.com/news/195499.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0