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

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供欒川網(wǎng)站建設(shè)、欒川做網(wǎng)站、欒川網(wǎng)站設(shè)計(jì)、欒川網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、欒川企業(yè)網(wǎng)站模板建站服務(wù)，10年欒川做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

axios 簡(jiǎn)介

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

從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請(qǐng)求
支持 Promise API
攔截請(qǐng)求和響應(yīng)
轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防止 CSRF/XSRF

下面代碼給大家介紹vue axios 請(qǐng)求攔截，具體代碼如下所示：

import axios from 'axios';//引入axios依賴
import { Message } from 'element-ui';
import Cookies from 'js-cookie'; //引入cookie操作依賴
import router from '@/router/index'//引入路由對(duì)象
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
//http request 封裝請(qǐng)求頭攔截器
axios.interceptors.request.use(
  config => {
    var token = ''
    if(typeof Cookies.get('user') === 'undefined'){
      //此時(shí)為空
    }else {
      token = JSON.parse(Cookies.get('user')).token
    }//注意使用的時(shí)候需要引入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 封裝后臺(tái)返回?cái)r截器
axios.interceptors.response.use(
  response => {
    //當(dāng)返回信息為未登錄或者登錄失效的時(shí)候重定向?yàn)榈卿涰?yè)面
    if(response.data.code == 'W_100004' || response.data.message == '用戶未登錄或登錄超時(shí)，請(qǐng)登錄！'){
      router.push({
        path:"/",
        querry:{redirect:router.currentRoute.fullPath}//從哪個(gè)頁(yè)面跳轉(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請(qǐng)求
 * @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)
      })
  })
}
/**
 * 封裝導(dǎo)出Excal文件請(qǐng)求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function exportExcel(url,data = {}){
  return new Promise((resolve,reject) => {
    axios({
      method: 'post',
      url: url, // 請(qǐng)求地址
      data: data, // 參數(shù)
      responseType: 'blob' // 表明返回服務(wù)器返回的數(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請(qǐng)求
 * @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請(qǐng)求
 * @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請(qǐng)求攔截的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！