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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
原生js二级联动效果
Jun 20 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
vue设置默认首页的操作
Aug 12 Javascript
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站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
利用python批量检查网站的可用性
2016/09/09 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
详解python中的装饰器
2018/07/10 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
钳工实习自我鉴定
2013/09/19 职场文书
会计系毕业求职信
2014/08/07 职场文书
五心教育心得体会
2014/09/04 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
民间借贷借条如何写
2015/05/26 职场文书
工作简报格式范文
2015/07/21 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js