小言_互联网的博客

vue响应拦截器定义及调用实例

220人阅读  评论(0)

目录

 

公共文件

引入

拦截器

请求

验证码实例

后端接口

前端

跨域


公共文件


文件路径和名称:utils/api.js

引入


import axios from "axios";
import { Message } from 'element-ui';
import router from "../router";//在拦截器中引入了router,在router中,配置了首先要转向的页面

 

拦截器

如果成功调用了后端接口 

  //  后端返回  

 确定是调用了后端

     如果,后端返回500、401、403,消息框提示(Messsage.error)后端返回的提示信息,因为是业务逻辑错误,所以返回空

     如果,有返回信息,消息框显示成功信息

  返回成功的数据

如果没有调用到后端

   后端返回504、404

     消息框提示服务器被吃了( ╯□╰ )

   后端返回403

     提示没权限

    后端返回401

      提示尚未登录,请登录

      路由替换成根路径

    判断后端返回的错误应答data是否有信息

       如果有信息,消息框提示data.message

       否则,消息框提示未知错误

    返回空

请求

定义前置路径

导出定义的post请求,参数是url\params

返回 axios

方法:post

data:params

 

验证码实例

后端接口

前端

页面打开,就加载updateCaptcha方法,方法中获取到验证码图片的地址,通过get方法。

提交登录调用了post方法

执行这个方法,就会调用postRequest公共方法

跨域

 

 

 


转载:https://blog.csdn.net/wenxi2367/article/details/116450069
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场