vue axios請(qǐng)求攔截實(shí)例代碼
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)
})
})
}
總結(jié)
以上所述是小編給大家介紹的vue axios請(qǐng)求攔截,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié)
這篇文章主要介紹了IDEA創(chuàng)建Vue項(xiàng)目的兩種方式總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2023-04-04
在vs code 中如何創(chuàng)建一個(gè)自己的 Vue 模板代碼
這篇文章主要介紹了在vs code 中如何創(chuàng)建一個(gè)自己的 Vue 模板代碼,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11
vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐
viewer.js是一款開(kāi)源的圖片預(yù)覽插件,功能十分強(qiáng)大,本文主要介紹了vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue directive定義全局和局部指令及指令簡(jiǎn)寫
這篇文章主要介紹了vue directive定義全局和局部指令及指令簡(jiǎn)寫,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11

