拦截器是用来全局拦截axios的每一次请求与响应的，可以把每个请求中某些重复性的代码封装到拦截器中，提高代码的复用性。
当客户端把请求发送到服务器的时候，请求拦截器会在其中进行请求拦截，然后运行封装的重复性代码，再发送给服务器。当服务器把响应发送到客户端的时候，响应拦截器会进行响应拦截，然后运行封装的重复性代码，再发送给客户端。
请求拦截器：axios.interceptors.requset.use(function())
响应拦截器：axios.interceptors.response.use(function())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
<style>
body {
padding: 20px;
}
.loading-box {
position: fixed;
top: 30%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-shadow: 1px 1px 3px #efefef;
display: none;
}
</style>
</head>
<body>
<!-- 按钮 -->
<button class="btn btn-primary" id="btnGET">GET</button>
<button class="btn btn-info" id="btnPOST">POST</button>
<button class="btn btn-warning" id="btnBooks">获取图书列表数据</button>
<!-- loading 区域 -->
<div class="loading-box">
<div class="spinner-border m-5 text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<script src="./lib/jquery-v3.6.0.js"></script>
<script src="./lib/axios.js"></script>
<script>
// 配置请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3009'
$(function () {
// 请求拦截器
axios.interceptors.request.use(function (config) {
// 展示 loading 效果
$('.loading-box').show()
return config
}, function (error) {
return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(function (respanse) {
// 隐藏 loading 效果
$('.loading-box').hide()
return respanse
}, function (error) {
// 隐藏 loading 效果
$('.loading-box').hide()
return Promise.reject(error)
})
// 点击按钮，发起 GET 请求
$('#btnGET').on('click', function () {
axios.get('/api/get').then(function (res) {
console.log(res.data)
})
})
// 点击按钮，发起 POST 请求
$('#btnPOST').on('click', function () {
axios.post('/api/post', { name: 'zs' }).then(function (res) {
console.log(res.data)
})
})
$('#btnBooks').on('click', function () {
axios.get('/api/getbooks').then(function (res) {
console.log(res.data)
})
})
})
</script>
</body>
</html>