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請求攔截,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答