这次给大家带来vue+axios如何实现请求拦截功能，vue+axios实现请求拦截功能的注意事项有哪些，下面就是实战案例，一起来看一下。
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
下面代码给大家介绍vue axios 请求拦截，具体代码如下所示：
import axios from 'axios';//引入axios依赖import { Message } from 'element-ui';import Cookies from 'js-cookie'; //引入cookie操作依赖import router from '@/router/index'//引入路由对象axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 封装请求头拦截器axios.interceptors.request.use( config => { var token = '' if(typeof Cookies.get('user') === 'undefined'){ //此时为空 }else { token = JSON.parse(Cookies.get('user')).token }//注意使用的时候需要引入cookie方法，推荐js-cookie config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/json' } if(token != ''){ config.headers.token = token; } return config; }, error => { return Promise.reject(err); });//http response 封装后台返回拦截器axios.interceptors.response.use( response => { //当返回信息为未登录或者登录失效的时候重定向为登录页面 if(response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时，请登录！'){ router.push({ path:"/", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; }, error => { return Promise.reject(error) })/** * 封装get方法 * @param url * @param data * @returns {Promise} */export function fetch(url,params={}){ return new Promise((resolve,reject) => { axios.get(url,{ params:params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) })}/** * 封装post请求 * @param url * @param data * @returns {Promise} */export function post(url,data = {}){ return new Promise((resolve,reject) => { axios.post(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) })}/** * 封装导出Excal文件请求 * @param url * @param data * @returns {Promise} */export function exportExcel(url,data = {}){ return new Promise((resolve,reject) => { axios({ method: 'post', url: url, // 请求地址 data: data, // 参数 responseType: 'blob' // 表明返回服务器返回的数据类型 }) .then(response => { resolve(response.data); let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); let fileName = "订单列表_"+Date.parse(new Date())+".xls" ; if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName); } else { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } },err => { reject(err) }) })}/** * 封装patch请求 * @param url * @param data * @returns {Promise} */export function patch(url,data = {}){ return new Promise((resolve,reject) => { axios.patch(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) })}/** * 封装put请求 * @param url * @param data * @returns {Promise} */export function put(url,data = {}){ return new Promise((resolve,reject) => { axios.put(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) })}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue实现搜索列表内容
vue+axios表单中上传图片步骤详解
以上就是vue+axios如何实现请求拦截功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2762564.html
