Vue的axios拦截器

为什么要使用拦截器？

在页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如：判断token，设置请求头。如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。

所以axios为开发者提供了这样一个API：拦截器。

拦截器分类？

拦截器分为请求（request）拦截器和响应（response）拦截器

代码实现

mounted(){let that = this;// 组件被挂载  可以操作数据// 1、请求拦截axios.interceptors.request.use(function(config){// 请求之前可以做一些处理、操作// eg：请求的loading动画// 为所有的请求添加公用部分 =>  比如接口前面的配置都是一样的  在这里就可以把相同的抽离出来  统一添加console.log('请求即将开始');return config;},function(err){//请求错误之前可以进行处理return Promise.reject(err)});// 2、拦截响应axios.interceptors.response.use(function(response){//对返回的数据进行操作console.log('即将返回我们想要的数据');console.log(response);// if(response.data.code == 240){//     that.msg = '联系coder处理'// }if(response.data.code == 240){response  = '联系coder处理'}return response},function(err){return Promise.reject(err)})
}

Vue拦截案例

请求一个接口，post请求需要带key值传参，如果没有key，在响应拦截中拦截错误进行信息返回

<!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>post</title>
</head>
<body><div id="app"><h1>{{msg}}</h1><button @click="post">Post请求</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script><script>let vm = new Vue({el:"#app",data(){return{msg:'POST请求',postUrl:"http://api.tianapi.com/networkhot/index",}},mounted(){let that = this;// 组件被挂载  可以操作数据// 1、请求拦截axios.interceptors.request.use(function(config){// 请求之前可以做一些处理、操作// eg：请求的loading动画// 为所有的请求添加公用部分 =>  比如接口前面的配置都是一样的  在这里就可以把相同的抽离出来  统一添加console.log('请求即将开始');return config;},function(err){//请求错误之前可以进行处理return Promise.reject(err)});// 2、拦截响应axios.interceptors.response.use(function(response){//对返回的数据进行操作console.log('即将返回我们想要的数据');console.log(response);// if(response.data.code == 240){//     that.msg = '联系coder处理'// }if(response.data.code == 240){response  = '联系coder处理'} return response},function(err){return Promise.reject(err)})},methods:{post(){axios.post(this.postUrl+'?key=04c33fe9934dc4ce67afc0d7a41a80d7',{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(//promise 语法// .then  代表成功获取数据之后的操作res=>{//res  == response 代表返回值this.msg = res}).catch(err=>{console.log(err);})}               }})</script>
</body>
</html>

Vue的axios拦截器相关推荐

关于vue中axios拦截器的使用
预期目标:解决请求任意接口之前进行统一拦截判断,看是否返回500或404等错误并在页面给出错误提示. 一.刚开始看官方文档,如下: 备注:将代码加到页面中发现并未起作用,百度谷歌搜索一番,发现都是千篇 ...
vue中axios拦截器的使用
1.拦截器分为request请求拦截器和response响应拦截器 PS:request请求拦截器:发送请求前统一处理,如:设置请求头headers.应用的版本号.终端类型等. response响应拦 ...
vue的axios拦截器实现未登录页面跳转
1.拦截器分为request请求拦截器和response响应拦截器 PS:request请求拦截器:发送请求前统一处理,如:设置请求头headers.应用的版本号.终端类型等. response响应拦 ...
axios拦截器 config_axios拦截器
页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者提供了这样一个API: ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...
vue路由守卫,axios拦截器,权限树
K15项目案例-后台 1.分页问题关于分页表格列中的序号问题: <el-table-column type="selection" label="序号" ...
Vue学习笔记：axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

Vue的axios拦截器

Vue的axios拦截器

为什么要使用拦截器？

拦截器分类？

代码实现

Vue拦截案例

请求一个接口，post请求需要带key值传参，如果没有key，在响应拦截中拦截错误进行信息返回

Vue的axios拦截器相关推荐

最新文章

热门文章