首页 > 编程 > JavaScript > 正文

vue axios请求拦截实例代码

2019-11-19 14:05:30
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表