vue axios请求拦截实例代码


Posted in Javascript onMarch 29, 2018

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请求拦截,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
JavaScript面试出现频繁的一些易错点整理
Mar 29 #Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
详解Javascript中new()到底做了些什么?
Mar 29 #Javascript
Koa2 之文件上传下载的示例代码
Mar 29 #Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 #Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 #Javascript
利用js实现前后台传送Json的示例代码
Mar 29 #Javascript
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
js的回调函数详解
2015/01/05 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
javascript实现表单验证
2016/01/29 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
JS实现图片切换效果
2018/11/17 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
java关于string最常出现的面试题整理
2021/01/18 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
公司拓展活动方案
2014/02/13 职场文书
工地标语大全
2014/06/18 职场文书
小学课外阅读总结
2014/07/09 职场文书
课程设计的心得体会
2014/09/03 职场文书
个人授权委托书范文
2014/09/21 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
jquery插件实现搜索历史
2021/04/24 jQuery
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers