105 lines
3.8 KiB
HTML
105 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Inula Request Interceptor Test</title>
|
||
<link rel="stylesheet" type="text/css" href="interceptorStyles.css">
|
||
</head>
|
||
<body>
|
||
<header>Inula Request interceptor Test</header>
|
||
<h2>使用拦截器：</h2>
|
||
<div class="response-container">
|
||
<h3>响应状态码：</h3>
|
||
<div class="pre-container">
|
||
<pre id="responseStatusWithInterceptor">等待发送请求...</pre>
|
||
</div>
|
||
<h3>请求拦截反馈：</h3>
|
||
<div class="pre-container">
|
||
<pre id="requestInterceptorFeedback">等待发送请求...</pre>
|
||
</div>
|
||
<h3>响应拦截反馈：</h3>
|
||
<div class="pre-container">
|
||
<pre id="responseInterceptorFeedback">等待发送请求...</pre>
|
||
</div>
|
||
<h3>响应数据：</h3>
|
||
<div class="pre-container">
|
||
<pre id="responseDataWithInterceptor">等待发送请求...</pre>
|
||
</div>
|
||
<div class="button">
|
||
<button id="sendRequestWithInterceptor">发送请求</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>不使用拦截器：</h2>
|
||
<div class="response-container">
|
||
<h3>响应状态码：</h3>
|
||
<div class="pre-container">
|
||
<pre id="responseStatusWithoutInterceptor">等待发送请求...</pre>
|
||
</div>
|
||
<h3>拦截反馈：</h3>
|
||
<div class="pre-container">
|
||
<pre id="noInterceptorFeedback">等待发送请求...</pre>
|
||
</div>
|
||
<h3>响应数据：</h3>
|
||
<div class="pre-container">
|
||
<pre id="responseDataWithoutInterceptor">等待发送请求...</pre>
|
||
</div>
|
||
<div class="button">
|
||
<button id="sendRequestWithoutInterceptor">发送请求</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../../dist/bundle.js"></script>
|
||
|
||
<script>
|
||
// 创建使用拦截器的 IR 实例
|
||
const irInstance = inulaRequest.create();
|
||
|
||
// 添加请求拦截器
|
||
irInstance.interceptors.request.use(function(config) {
|
||
// 为请求添加自定义请求头
|
||
config.headers['IR-Custom-Header'] = 'CustomHeaderValue';
|
||
document.getElementById('requestInterceptorFeedback').textContent = '请求已拦截，并添加请求头IR-Custom-Header';
|
||
return config;
|
||
}, function(error) {
|
||
return Promise.reject(error);
|
||
});
|
||
|
||
// 添加响应拦截器
|
||
irInstance.interceptors.response.use(function(response) {
|
||
// 更新响应状态码
|
||
response.status = 404;
|
||
document.getElementById('responseStatusWithInterceptor').textContent = String(response.status);
|
||
document.getElementById('responseInterceptorFeedback').textContent = '响应已被拦截，状态响应码被强制修改成404'
|
||
return response;
|
||
}, function(error) {
|
||
return Promise.reject(error);
|
||
});
|
||
|
||
// 使用拦截器的请求
|
||
document.getElementById('sendRequestWithInterceptor').addEventListener('click', function () {
|
||
irInstance.get('http://localhost:3001/')
|
||
.then(function (response) {
|
||
document.getElementById('responseDataWithInterceptor').textContent = JSON.stringify(response.data, null, 2);
|
||
}).catch(function (error) {
|
||
document.getElementById('responseDataWithInterceptor').textContent = 'Request failed:' + error;
|
||
})
|
||
});
|
||
|
||
// 不使用拦截器的请求
|
||
document.getElementById('sendRequestWithoutInterceptor').addEventListener('click', function () {
|
||
inulaRequest.get('http://localhost:3001/')
|
||
.then(function (response) {
|
||
document.getElementById('responseStatusWithoutInterceptor').textContent = response.status;
|
||
document.getElementById('responseDataWithoutInterceptor').textContent = JSON.stringify(response.data, null, 2);
|
||
document.getElementById('noInterceptorFeedback').textContent = '请求未被拦截';
|
||
}).catch(function (error) {
|
||
document.getElementById('responseDataWithoutInterceptor').textContent = 'Request failed:' + error;
|
||
})
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|