vue axios請求攔截實(shí)例代碼
axios 簡介
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特征:
從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請求
支持 Promise API
攔截請求和響應(yīng)
轉(zhuǎn)換請求和響應(yīng)數(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'){ //此時(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 封裝后臺返回?cái)r截器 axios.interceptors.response.use( response => { //當(dāng)返回信息為未登錄或者登錄失效的時(shí)候重定向?yàn)榈卿涰撁? if(response.data.code == 'W_100004' || response.data.message == '用戶未登錄或登錄超時(shí),請登錄!'){ router.push({ path:"/", querry:{redirect:router.currentRoute.fullPath}//從哪個(gè)頁面跳轉(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) }) }) } /** * 封裝導(dǎo)出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' // 表明返回服務(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請求 * @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) }) }) }
總結(jié)
以上所述是小編給大家介紹的vue axios請求攔截,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
解決vue?vite啟動項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?的問題
這篇文章主要介紹了vue?vite啟動項(xiàng)目報(bào)錯(cuò)ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類問題的原因所在并給出解決方法,需要的朋友可以參考下2022-09-09Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時(shí)器并不會自動關(guān)閉,需要手動清除,當(dāng)頁面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10vue?實(shí)現(xiàn)左滑圖片驗(yàn)證功能
網(wǎng)頁中滑動圖片驗(yàn)證一直是各大網(wǎng)站、移動端的主流校驗(yàn)方式,其主要作用是為了區(qū)分人和機(jī)器以及為了防止機(jī)器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護(hù)方式,這篇文章主要介紹了vue?實(shí)現(xiàn)左滑圖片驗(yàn)證,需要的朋友可以參考下2023-04-04在vue項(xiàng)目中配置你自己的啟動命令和打包命令方式
這篇文章主要介紹了在vue項(xiàng)目中配置你自己的啟動命令和打包命令方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04VUE3+vite項(xiàng)目中動態(tài)引入組件與異步組件的詳細(xì)實(shí)例
在做vue3項(xiàng)目中時(shí),每次使用都需要先進(jìn)行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項(xiàng)目中動態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下2022-09-09解決vant的Toast組件時(shí)提示not defined的問題
這篇文章主要介紹了解決vant的Toast組件時(shí)提示not defined的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04