vue axios请求拦截实例代码
程序员文章站
2022-06-17 18:32:01
axios 简介
axios 是一个基于promise 用于浏览器和 nodejs 的 http 客户端,它本身具有以下特征:
从浏览器中创建 xmlhttpreque...
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 axios请求拦截,希望对大家有所帮助