vue中axios請求攔截的示例分析

這篇文章主要介紹vue中axios請求攔截的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

axios 簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：

從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請求
支持 Promise API
攔截請求和響應
轉(zhuǎn)換請求和響應數(shù)據(jù)
取消請求
自動轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防止 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}//從哪個頁面跳轉(zhuǎn)
      })
    }
    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, // 參數(shù)
      responseType: 'blob' // 表明返回服務器返回的數(shù)據(jù)類型
    })
    .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請求攔截的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！