【Axios拦截器】基于abp的前端vue框架interceptors响应结构

最新推荐文章于 2023-05-25 17:45:03 发布

素心2020

最新推荐文章于 2023-05-25 17:45:03 发布

阅读量401

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44683095/article/details/106443535

版权

本文介绍了在Vue.js项目中，针对基于Abp框架的API响应，如何使用Axios拦截器进行响应结构的处理。文章详细阐述了遇到的问题，API返回的数据结构，问题的原因，并提供了相应的解决方案，包括封装的ajax.ts代码，以实现更有效地处理接口响应异常信息。

摘要由CSDN通过智能技术生成

 基于abp技术的项目，前端vue框架的axios封装，在框架初始化代码的基础上完善拦截器。

起因

1.遇到问题：

 基于abp的前端vue框架项目，登录失败却没有任何反应，且界面一直在loading。

在这里插入图片描述

2.API响应数据结构和内容：

在这里插入图片描述

3.原因：

 3.1. 修复并排除API、前端登录逻辑的bug，锁定问题——登录密码错误，属于请求接口传参错误400，但接口请求是200。

 3.2. 前端是使用Axios拦截器捕获异常，而Axios拦截器的error捕获，只能捕获非2开头的状态码情况。

4. 解决方案：

 4.1.拦截器正常响应结构中，捕获异常——利用数据字典的success参数（接口是否真正请求成功）做关键判断。
 4.2.关闭登录loading。
 4.3.输出异常信息。

let vm = new Vue({
   });//创建vue实例
//响应拦截器结构：全局处理请求API响应数据
axios.interceptors.response.use((respon) => {
   //正常响应操作
    if (respon.data.success) {
   //根据数据字典中的success判断
        return respon //下一步
    } else {
   
        vm.$Message.destroy();//全局销毁iview Message——loading提示
        let resError = respon.data.error;
        if (!!resError.details)
            vm.$Modal.error({
   
            title: resError.message,
            content: resError.details})//输出异常结构中的提示内容，流程结束
    }
}, (error) => {
   //异常响应，捕获非2开头状态码接口情况
    if (!!error.response && !!error.response