民法典学习笔记,熟知与真知的学习笔记

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

什么是axios 拦截器？

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

创建拦截器 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 ,// request timeout responseType: "json", withCredentials: true, // 跨域请求是否要携带cookie headers: { '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拦截器得用法！

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