Vue学习笔记：axios 拦截器的用法

什么是axios 拦截器？

拦截器就是拦截每一次的请求和响应，然后进行相应的处理。请求拦截器，它可以统一在你发送请求前在请求体里加上token；响应拦截器，是在接受到响应之后进行的一些操作，比如，服务器返回登录状态失效，需要重新登录的时候，就给它跳到登录页面；

创建拦截器

const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000 ,// request timeoutresponseType: "json",withCredentials: true, // 跨域请求是否要携带cookieheaders: {'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',}
})

请求拦截器

/** 添加请求拦截器 **/
service.interceptors.request.use(config => {if (localStorage.getItem('token') == null) {// window.location.href = '/loginPage'} else {config.headers['token'] = localStorage.getItem('token')}return config},error => {Message.error("操作失败！")return Promise.reject(error)}
)

响应拦截器

service.interceptors.response.use(response => {if(response.status === 200 && response.data.code == 30001){Message.error(response.data.msg)}else{return Promise.resolve(response)}},error => {Message.error("操作失败！")return Promise.resolve(error)}
)

封装请求

1.在src下新建api.js

2.在api.js内封装好得拦截器js 导入 util.js
import request from '../utils/request';

import request from '../utils';
export function getlogout(query) {    //登出return request({url: '/ict-login/login/logout',method: 'post',params: query,})
}

使用

1.在组将中导入 api.js

import * as api from "@/api";
也可以单独将封装得请求导入
import { getlogout} from "@/api";

调用方式

api.getlogout({userName: this.adminName,
})
.then((response) => {}).catch(() => {});

END!!!

就如上封装，调用就封装好了axios拦截器得用法！

个人小记，欢迎指教！感谢阅读，欢迎关注点赞！！！

Vue学习笔记：axios 拦截器的用法相关推荐

axios 拦截器——基本用法及拦截器代码
之前在开发后台管理系统时,都是跟其他同事一起开发,说实在点,就是在别人开发的基础上写页面... 现在想把之前没有关注的点拾起来.. 今天看下axios拦截器的用法用vue写代码在做ajax请求时,可 ...
vue路由守卫,axios拦截器,权限树
K15项目案例-后台 1.分页问题关于分页表格列中的序号问题: <el-table-column type="selection" label="序号" ...
Vue中的axios拦截器
axios中的拦截 1.1 介绍: 拦截器包括请求拦截器与相应拦截器,可以在请求发送前或者相应后进行拦截处理.在axios对象上有一个interceptors属性,该属性又有request和respo ...
axios 拦截器的用法
什么是拦截器拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态 ...
JavaWeb学习笔记：拦截器
一.概述当客户端发起请求时,Filter 过滤器可以将请求拦截下来,对请求进行一些判断,只有符合要求的请求才会放行.应用场景:登录验证,设置编码,过滤明杆字符等. 二.生命周期过滤器的生命周期和 ...
【SpringMVC笔记】拦截器 + 文件上传下载
拦截器 + 文件上传下载拦截器(interceptor) 自定义拦截器验证用户是否登录 (认证用户) 没有拦截器配置拦截器文件的上传文件输出流进行文件上传 file.Transto 进行文件 ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

Vue学习笔记：axios 拦截器的用法

什么是axios 拦截器？

创建拦截器

请求拦截器

响应拦截器

封装请求

使用

调用方式

Vue学习笔记：axios 拦截器的用法相关推荐

最新文章

热门文章