el-form中保存时axios发请求不进入then进入catch

问题描述

今天接手之前同事写的代码的时候遇到一个问题:

点击 编辑 中的 保存按钮 或者是 删除 的时候, 请求可以发送成功, 但是控制台总会显示报错信息.

页面上的elementUI提示也是 $message.error 形式的.

请求发送之后的 .then 也进不去, 反而会显示 .catch 中的内容.

然后我就开始百度:

得知产生这种问题的原因主要有以下几种:

1. 当axios请求完成后走的是then的代码块，如果then代码块中存在错误代码信息，这时就会进入catch中>抛出异常（注意：此时控制台并不会报错，因为错误被catch捕获了）

2. axios是异步发起，若发起后页面刷新，那么就会丢失当前进程，导致接收不到。例如 form表单，点击>按钮提交后，表单会刷新

具体可以参考: https://www.jianshu.com/p/0781c10c8ac8

因为我的页面布局中 新建 和 编辑 页面弹出使用的 elementUI 的对话框 ( el-dialog ), 在对话框中添加的 el-form 表单, 所以到这里我以为是因为表单会自动刷新, 导致进程丢失引起的. 所以我又开始百度避免表单自动刷新的方法:

在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。阻止浏览器的默认行为，可以用事件对象e.preventDefault()

但像上述form表单提交的这种浏览器默认事件，每次都要写e.preventDefaul()其实还是比较麻烦。vue中可以更好的解决，只要在事件的后面添加一个prevent修饰符即可，表示阻止默认事件

可以参考: https://www.jianshu.com/p/5d2ca05b70b3

但是我设置了还是没什么用… 也怪自己对elementUI不够了解, 然后我就吃饭去了.

吃完饭回来偶然看到一篇博文提到了 响应拦截器, 我突然意识到可能是因为响应拦截器中设置了什么导致了这个问题. 果不其然 !

产生原因

之前的同时在响应拦截器中就获取了返回内容的 status 做了比较, 但是比较的时候出了问题:

1. 响应拦截器中的代码:
   
2. postman中的响应:
   

代码中用的是 !== , 会进行数据类型的比较, 才导致了错误. 改成 != 以后就解决了.

!== 和 != 的区别:

1. 比较结果上的区别

• != 返回同类型值比较结果。

• !== 不同类型不比较，且无结果，同类型才比较。

2. 比较过程上的区别

• != 比较时，若类型不同，会偿试转换类型。

• !== 只有相同类型才会比较。