问题描述:

使用axios发送ajax请求,服务器返回200,数据也成功返回了,但是前台这里,axios 这边代码也走了 then方法的代码,但是走完之后,又走了catch里的代码,仔细检查了then方法里的代码,没有错误。

请求截图

axios then 和 catch 方法代码

 
  1. this.login(param).then(res => {
  2. if(res.data.state) {
  3. this.$message({
  4. showClose: true,
  5. message: '登录成功',
  6. type: 'success',
  7. duration: '1500'
  8. });
  9.  
  10. } else {
  11. this.$message({
  12. showClose: true,
  13. message: '登录失败',
  14. type: 'error',
  15. duration: 3000
  16. });
  17. }
  18. }).catch(err => {
  19. this.$message({
  20. showClose: true,
  21. message: "未找到服务器",
  22. type: 'warning',
  23. duration: 3000
  24. });
  25. })

axios 请求代码

 
  1. axios
  2. .post(url, params)
  3. .then(res => {
  4. resolve(res.data); // 错误原因其实是这里传递了res.data 正确的应该是res
  5. })
  6. .catch(err => {
  7. reject(err);
  8. });
  9. });

错误原因分析:

1、据说 then方法里有错误代码会走catch里,没碰到过

2、我的错误原因是,post 请求里 then 方法里的 resolve(res.data)参数传递值错误

解决办法:

axios 应该是会有一套标准的返回形式

data、headers /request status statusText 这样的返回字段

axios 应该是需要判断status里的200 或者statusText里的ok 之类的,而我们只传递了 data 里的字段回去。故导致了,他既走了then,也走了catch里的代码。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐