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

最新推荐文章于 2024-06-09 00:06:08 发布
最新推荐文章于 2024-06-09 00:06:08 发布
阅读量993 收藏
点赞数
分类专栏： 前端调试 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenxi2367/article/details/116450069
版权

目录

 

公共文件

引入

拦截器

请求

验证码实例

后端接口

前端

跨域

公共文件


文件路径和名称：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公共方法

跨域

 

 

 

圈圈圈小明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios请求拦截、响应拦截，router导航守卫
weixin_44771007的博客
06-08 544
axios请求拦截：可以在请求头统一添加token等 axios.interceptors.request.use( function (config) { //从vuex中获取用户信息 let user = store.state.userForm; if (user) config.headers.Authorization = `Bearer ${user.token}`; return config; }, function (error) { ret
uniapp路由传多个参数_VUE全局路由前置守卫：路由拦截登录校验
weixin_39580682的博客
11-19 1839
点击右上方红色按钮关注“web秀”，让你真正秀起来前言在任何一个平台中，如果需要增加用户黏度，除了用户需要的基本内容外，用户登录注册提交信息也是非常重要的一环，可以了解用户基本信息，用户喜欢等。抛出前后端混合开发外，vue可以轻松的实现路由拦截。Vue Router对路由集中统一管理，所以我们可以在main.js中添加如下代码，对所有路由进行拦截：router.beforeEach((to, fr...
关于响应拦截器和请求拦截器（学习自用，欢迎纠错补充）
最新发布
yayaye717的博客
06-09 296
关于响应拦截器和请求拦截器（学习自用，欢迎纠错补充）
vue在拦截器中使用vue实例（this）
laoyaoshilaoyao的博客
03-03 629
在index.html文件中定义一个变量vm 在main.js中 之后在拦截器中就可以用window.vm使用vue实例了
vue 拦截器 组件的使用
m0_64895976的博客
04-11 1050
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
普歌-vue中配合axios的拦截器实现自定义loading组件（插件）
熟悉JS拼写的FE
06-27 588
前言：在vue中想实现loading加载可以使用NProgress，如果效果没有达到想要的效果就可以用自定义loading 先搭建一个loading组件 在components下创建一个Loading/loading.vue的文件，现附上loading代码 <template> <div class="loading-page" v-if="loading"> <div data-loader="jumping"></div> <p.
vue下axios拦截器token刷新机制的实例代码
11-21
通常，你会在Vue实例的`created`或`mounted`生命周期钩子中设置它们，确保在应用启动时，拦截器已经生效。 这个示例展示了如何在Vue应用中优雅地处理JWT的自动刷新，保证了用户体验的连续性。通过这样的机制，即使...
vue-resource拦截器设置头信息的实例
08-29
Vue-resource的拦截器功能允许我们在请求被发送到服务器之前或响应返回之后执行自定义逻辑。这在处理全局的请求头、错误处理或者统一的数据格式化等场景下特别有用。下面我们将详细讨论如何设置Vue-resource的拦截器...
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
12-09
当遇到类似问题时，应考虑将拦截器逻辑与Vue实例的生命周期解耦，或者寻找其他方式使拦截器能够在页面刷新后依然能够正常工作。同时，合理地利用全局变量和Vue实例，可以有效地解决组件间通信和第三方插件使用的问题...
vue-resource 拦截器使用详解
08-31
拦截器是 Vue-resource 提供的一种机制，可以在请求发送前或响应返回后执行自定义函数，从而实现全局的操作。这极大地提高了代码的可维护性和复用性。在本篇中，我们将详细介绍如何使用 Vue-resource 的拦截器处理 ...
Vue项目使用拦截器和JWT验证 完整案例
很多时候犯错都是在不知情的情况下发生的
08-29 575
挺详细的一个案例项目，值得参考！ 作者：YXi https://juejin.im/post/6844903959883218951) https://gitee.com/gitee_fanjunyang/Inter_JWT 几乎在所有的项目中都离不开拦截器和登录验证，这是必需的。如果你学会了这个 demo，那么几乎所有网站的登录验证，加载动画就都会了，所以背也要背会 所以本章以一个 demo 为例，来帮助大家理解拦截器和登录验证控制 文章后面有源码，可以下载下来运行一下 先来看看效果：
Vue中的使用axios封装的全局拦截器
weixin_42467467的博客
04-07 916
使用axios，并挂载到全局 以下配置在main.js中 其他页面在使用axios的时候直接 this.$axios就可以了 import Axios from 'axios'; Vue.prototype.$axios = Axios; 配置全局请求拦截器 使用如下方法 axios.interceptors.request.use(config=>{},err=>{}) 报错时通...
Vue中请求拦截、响应拦截和路由元信息使用
qq_43378800的博客
08-21 1332
1.请求拦截 在使用axios发送登入请求的时候,可以使用拦截器,给请求头加上自己的token axios.interceptors.request.use(function (config) { flag=false config.headers.Authorization = window.localStorage.getItem('token'); return config;...
在vue中如何优雅的使用axios请求以及请求拦截的使用（自定义插件plugin中使用mixin封装axios、在api中）
qq_45740103的博客
03-08 1002
mixin混入来封装axios请求 我们通过mixin来封装axios请求这样每一个组件直接通过混入来进行axios请求。 不必每次需要时都要import引入一次 首先需要下载axios的包 //用npm、cnpm或者yarn都行 npm install axios yarn add axios 在src里新建一个mixins文件夹，在新文件夹里新建一个js文件...
vue中request和response请求拦截器
style201904的博客
08-25 3054
request 请求拦截器，有token值则配置上token值 axios.interceptors.request.use( config=>{ if(token && config.url != "/login"){ config.headers['Authentication'] = token } return config; }, error=>{ console.log(error); Promise.reject(error
vue interceptor 使用
palmer_kai的博客
09-13 1229
二次封装axios，根据参数来实现多个请求多次拦截 1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑import Vue from 'vue' import axios from 'axios' //取消请求 let CancelToken = axios.CancelToken //设置默认请求头，如果不需要可以取消这一步 axios.defaults.header...
Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal（在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,）
王佳斌
07-07 3405
但框架的弹框可能无法满足您的需求，而这时候我们需要自定义一个组件，本文从 0 -1 提供整个过程，帮您在 纯 JS 文件中调用自定义组件 的方法，来打开自定义组件。常见于 请求封装拦截器那块，捕获到登录失效时 弹出登录框 需求。您只需要一路复制粘贴，仅需 2 步，稍微改改即可。在 文件夹下，新建 文件，您直接一键复制全部 Vue 使用js来调用一个组件，js中如何自定义组件，Vue 项目中,在Vue 使用js来调用一个组件，js中如何自定义组件，Vue 项目中,在js文件中调用组件 ,并且注册成全局，
vue自定义http请求方式，配置拦截器
Derick的博客
08-07 3519
import axios from 'axios' import Vue from 'vue' import { Message } from 'element-ui' // 创建axios实例 const http = axios.create({ baseURL: "", timeout: 120000 // 请求超时时间 }) /...
vue 配置了全局的http拦截器，单独某个组件不需要这个拦截器，如何设置
weixin_33757911的博客
04-19 2018
之前写过关于全局配置http拦截器的随笔，现在有个需求，在微信支付时，生成二维码，页面显示一个遮罩层，二维码页面需要每两秒请求一次接口，若返回结果为已支付，则进行页面跳转，但因为全局http中loading的存在，每两秒遮罩会闪动一次，所以此处需要配置不显示loading。 解决思路是： 1.全局声明了一个变量isShowLoading: true； 2.全局的http.js引入声明全局变量...
vue在响应拦截器中跳转路由
07-31
在Vue中，在响应拦截器中跳转路由可以通过使用Vue Router实现。要在响应拦截器中跳转路由，首先需要在项目中引入Vue Router，并在main.js或者需要使用路由的文件中进行配置。 首先，需要在项目中安装Vue Router，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值