vue axios post报400,返回两次错误信息

新手上路,请多包涵

这是我在main.js里面设置的响应拦截器:

axios.interceptors.response.use(function(res) {
        console.log("success");
    }, function(err) {
        console.log(err); // 打印错误日志
        if (err.response && err.response.status == 401) {
            router.replace({
                path: '/login',
                query: {
                    redirect: to.fullPath
                } // 将跳转的路由path作为参数,登录成功后跳转到该路由
            });
        } else if (err.response && err.response.status) {
            return Promise.reject(err.response && err.response.data); // 返回接口返回的错误信息
        }
    });

下面是页面请求报400时,error有两次打印,不知道为什么?
后台返回的是第二次打印,请问第一次打印是什么回事?
我打断点看了,确实是进入了两次错误打印。
image.png
下面是页面代码
image.png


方法:我刷新下页面,这边就会只有一次打印,且message提示正确
image.png
还一个疑问是,明明后台返回的是下面这个信息,为什么会打印上面的?
image.png


补上页面正确提示:
image.png


下面这个是错误提示,不能识别data,打断点看是responseerror走了两次的问题
image.png

忘各位大佬不吝赐教

阅读 9.1k
6 个回答

控制台第一次打印的是这行代码:

function(err) {
        console.log(err); // 打印错误日志
}

第二次打印的,是这行代码中

return Promise.reject(err.response && err.response.data)

中的err.response.data,也就是你后端接口正确返回的那个数据。

你那个cant read property的提示,你贴出来的代码中也没有操作data属性的代码,所以不知道是哪里出现的问题。

看一下是不是多了一次OPTIONS请求,axios默认请求头是Content-Type:application/json,这时候是会先发送一个预请求OPTIONS请求,这是一个不带参数的试探性请求,如果后端没有处理这种请求就可能返回报错。

axios.interceptors.response.use(function(res) {
        console.log("success");
    }, function(err) {
        console.log(err); // 打印错误日志
        console.log(JSON.stringify(err))
       

JSON.stringify(err), 看一下你的错误返回数据是什么,error.response应该没有data属性,所以找出第二次弹出data of undefined

preview

post 错误捕获写错了,
axios.post(url).then(res=>{}).catch(err=>{});
你的上面异常直接写在then下面了,语法错了所以会报两次错误.
下面是我自己搭建调用的400错误接口
在axios.interceptors.response 中打印 err.response数据
image.png
可以获取返回的错误信息

image.png

打印的是这个请求详情,回复里面不能贴图,@夏末流星
image.png


我怀疑是axios插件的问题,我换成fetch请求就没出现这个问题了;我就暂时这样规避,之后有大佬知道怎么解决,还请告知下,谢谢!
image.png

新手上路,请多包涵

同求。一直也在找这个答案。

新手上路,请多包涵

image.png
我定义了一个参数去接收response.use返回的number就好了。。

好像return Promise.reject(err.response && err.response.data);不要return, 直接写Promise.reject(err.response && err.response.data)好像也可以,但是这个应该会导致.catch接收补不到error。

第一个方法可以试一下

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题