axios的兩種攔截方式
前言
提示：這里可以添加本文要記錄的大概內(nèi)容：
關(guān)于axios的interceptors(攔截器)
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、請求攔截
axios.interceptors.request.use() 請求攔截
axios.interceptors.request.use( function ( config ) { return config })
這個方法的參數(shù)是一個函數(shù)，發(fā)送請求之前就會執(zhí)行這個函數(shù)，函數(shù)里面的參數(shù)就是執(zhí)行這個函數(shù)攔截到的配置對象config
我們?yōu)槭裁匆稣埱髷r截？
答：可以發(fā)起請求之前，做一個攔截，把數(shù)據(jù)（參數(shù)，配置…）做了處理再發(fā)送請求。
- 因為post請求傳參需要用字符串的方式 axios.post(‘/type’,‘pageSize=2’).then(res=> {})
- 但是寫對象的參數(shù)，對我們開發(fā)會友好一點 axios.post(‘/type’,{pageSize: 2}).then(res=> {}),可是這樣會導(dǎo)致錯誤
-
- 所以我們就可以用請求攔截去處理： 把對象轉(zhuǎn)成表單類型的字符串
axios.defaults.baseURL = '路由接口的根地址'
// 假設(shè)每個接口都有一個固定的參數(shù)
// pageSize : 固定為2個
// 可以發(fā)起請求之前，做一個攔截，把數(shù)據(jù)（參數(shù)，配置...）做了處理再發(fā)送請求
// 請求攔截
// 參數(shù)是一個函數(shù)，發(fā)送請求之前就會執(zhí)行這個函數(shù)，它的參數(shù)就是攔截到的配置對象
axios.interceptors.request.use(function(config){
console.log(config)
// config 就是配置對象
// 在這里可以修改config
// 比如添加固定的參數(shù)
config.params = {
pageSize: 3
}
return config; // 返回配置對象， 不返回就沒有任何參數(shù)了
})
axios.get('/hot',{
params: {
pageSize: 2
}
}).then(res=>{
console.log(res.data)
})
axios.get('/soon').then(res=>{
console.log(res.data)
})
我們打印一下config
我們可以看到，在config屬性中添加了params屬性，并且單純的請求方法中傳的參數(shù)無效，但是請求攔截中傳遞的參數(shù)有效
對POST請求參數(shù)做配置，使我們傳參的時候可以寫成對象的形式
baseURL可以直接在請求攔截的config中配置
1. 第一種方法：手工拼接
axios.defaults.baseURL = '接口路由地址'
一 手工拼接的方式
// axios.interceptors.request.use(function(config){
// // {type:'NBA',size:5,page:3} --> 'type=NBA&size=5&page=3'
// // console.log(config.data)
// let str = '';
// for(let item in config.data){
// // console.log(item) key
// // console.log(config.data[item]) value
// str += item+'='+config.data[item]+'&'
// }
// // console.log(str.slice(0,-1))
// str = str.slice(0,-1) // 去掉最后一個&
// config.data = str // 拼接好的str賦值給config.data
// return config;
// })
// 寫對象的參數(shù)，對我們開發(fā)會友好一點
// 我們就可以用請求去處理： 把對象轉(zhuǎn)成表單類型的字符串
axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{
console.log(res.data)
})
2. 第二種方法：URLSearchParams
// 二 使用 URLSearchParams的方式實現(xiàn)
axios.defaults.baseURL = '接口路由地址'
axios.interceptors.request.use(function(config){
// 1.創(chuàng)建URLSearchParams 實例
let pData = new URLSearchParams();
// 2. 遍歷參數(shù)對象
for(let item in config.data){
// 3. 調(diào)用append()
// 參數(shù)1：key 前面的值=
// 參數(shù)2：value =后面的值
pData.append(item,config.data[item])
}
//params的結(jié)果就是拼接好的 表單類型參數(shù)的字符串
// console.log(params.toString())
config.data = pData
return config
})
// 寫對象的參數(shù)，對我們開發(fā)會友好一點
// 我們就可以用請求去處理： 把對象轉(zhuǎn)成表單類型的字符串
axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{
console.log(res.data)
})
3. 第三種方法: npm.js 下載qs工具包
import axios from 'axios';
import qs from 'qs'
// 1.創(chuàng)建實例
const myaxios = axios.create({
baseURL: '請求路由地址'
})
// 請求攔截
myaxios.interceptors.request.use(function(config){
// 使用qs 來處理post的參數(shù)
config.data = qs.stringify(config.data)
return config
})
二、響應(yīng)攔截
axios.interceptors.response.use() 響應(yīng)攔截
axios.interceptors.response.use( function ( res ) { return res } )
這個方法的參數(shù)是一個函數(shù)，請求成功之前后就會執(zhí)行這個函數(shù)，函數(shù)里面的參數(shù)就是執(zhí)行這個函數(shù)攔截到的結(jié)果數(shù)據(jù)
我們?yōu)槭裁匆鲰憫?yīng)攔截？
答：在請求成功之后，對數(shù)據(jù)有固定處理方式，就可以在響應(yīng)攔截里面做。比如直接返回data,減少返回數(shù)據(jù)獲取的代碼量；還有一些狀態(tài)的固定處理，不同的后端，他們代碼風格可能是不一樣。有些可能是用code 表示狀態(tài) eg:20000代表成功 50002沒有權(quán)限 …。還有些用status表示狀態(tài)， eg: success 代表成功， fail代表失敗，只能要是后端代碼風格確定了，這些狀態(tài)通常是不會變的了。比如： 返回的請求失敗的狀態(tài)碼，那就可以做一個通用的處理，給一個彈框提示。
對data和返回的狀態(tài)做處理
axios.defaults.baseURL = '路由接口地址'
// 響應(yīng)攔截
axios.interceptors.response.use(function(res){
// console.log(res)
if(res.data.code == '20000'){
return res.data
}else if(res.data.code == '50002') {
alert('沒有權(quán)限')
return res
}else {
alert('請求出錯')
return res
}
})
axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{
console.log(res)
})
三、總結(jié)
html頁面中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
axios.defaults.baseURL = '請求路由地址'
axios.interceptors.request.use(function(config){
let params = new URLSearchParams();
for(let item in config.data){
params.append(item,config.data[item])
}
config.data = params
return config
})
// 響應(yīng)攔截
axios.interceptors.response.use(function(res){
// console.log(res)
if(res.data.code == '20000'){
return res.data
}else if(res.data.code == '50002') {
alert('沒有權(quán)限')
return res
}else {
alert('請求出錯')
return res
}
})
axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{
console.log(res)
})
</script>
</body>
</html>
Vue項目中使用
import axios from 'axios';
import qs from 'qs'
// 1.創(chuàng)建實例
const myaxios = axios.create({
baseURL: '請求路由地址'
})
// 請求攔截
myaxios.interceptors.request.use(function(config){
// 使用qs 來處理post的參數(shù)
config.data = qs.stringify(config.data)
return config
})
// 響應(yīng)攔截
myaxios.interceptors.response.use(function(res){
return res.data
})
export default myaxios
提示：文章總結(jié)：文章來源：http://www.zghlxwxcb.cn/news/detail-819964.html
以上就是今天要講的內(nèi)容，本文介紹了axios的兩種攔截，希望開開心心快快樂樂，無憂無慮沒有煩惱。文章來源地址http://www.zghlxwxcb.cn/news/detail-819964.html
到了這里，關(guān)于關(guān)于axios的兩種攔截方式：請求攔截和響應(yīng)攔截的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
