215 lines
7.6 KiB
HTML
215 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Inula Request API Test</title>
|
|
<link rel="stylesheet" type="text/css" href="requestStyles.css">
|
|
</head>
|
|
<body>
|
|
<header>Inula Request API Test</header>
|
|
<div class="container">
|
|
<div class="card">
|
|
<h2>Request</h2>
|
|
<pre id="request-result">等待发送请求...</pre>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="card">
|
|
<h2>GET Request</h2>
|
|
<pre id="get-result">等待发送请求...</pre>
|
|
</div>
|
|
<div class="card">
|
|
<h2>POST Request</h2>
|
|
<pre id="post-result">等待发送请求...</pre>
|
|
</div>
|
|
<div class="card">
|
|
<h2>PUT Request</h2>
|
|
<pre id="put-result">等待发送请求...</pre>
|
|
</div>
|
|
<div class="card">
|
|
<h2>DELETE Request</h2>
|
|
<pre id="delete-result">等待发送请求...</pre>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="card">
|
|
<h2>HEAD Request</h2>
|
|
<pre id="head-result">等待发送请求...</pre>
|
|
</div>
|
|
<div class="card">
|
|
<h2>OPTIONS Request</h2>
|
|
<pre id="options-result">等待发送请求...</pre>
|
|
</div>
|
|
<div class="card">
|
|
<h2>PATCH Request</h2>
|
|
<pre id="patch-result">等待发送请求...</pre>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="card" style="height: 250px">
|
|
<h2>UPLOAD Request</h2>
|
|
<input type="file" id="fileInput">
|
|
<pre id="upload-progress">UploadProgress: 0%</pre>
|
|
<pre id="upload-result">等待发送请求...</pre>
|
|
</div>
|
|
<div class="card" style="height: 250px">
|
|
<h2>DOWNLOAD Request</h2>
|
|
<div style="height: 23px"></div>
|
|
<pre id="download-progress">DownloadProgress: 0%</pre>
|
|
<pre id="download-result">等待发送请求...</pre>
|
|
</div>
|
|
</div>
|
|
<div class="button">
|
|
<button id="queryButton">点击发送请求</button>
|
|
</div>
|
|
<br>
|
|
<div class="button">
|
|
<button id="resetButton">点击重置</button>
|
|
</div>
|
|
<script src="../../dist/bundle.js"></script>
|
|
<script>
|
|
const requestResult = document.getElementById('request-result');
|
|
const getResult = document.getElementById('get-result');
|
|
const postResult = document.getElementById('post-result');
|
|
const putResult = document.getElementById('put-result');
|
|
const deleteResult = document.getElementById('delete-result');
|
|
const headResult = document.getElementById('head-result');
|
|
const optionsResult = document.getElementById('options-result');
|
|
const patchResult = document.getElementById('patch-result');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const uploadProgress = document.getElementById('upload-progress');
|
|
const uploadResult = document.getElementById('upload-result');
|
|
const downloadProgress = document.getElementById('download-progress');
|
|
const downloadResult = document.getElementById('download-result');
|
|
const queryButton = document.getElementById('queryButton');
|
|
const resetButton = document.getElementById('resetButton');
|
|
|
|
queryButton.addEventListener('click', function () {
|
|
const irInstance = inulaRequest.create();
|
|
irInstance.request('http://localhost:3001/', {method: 'GET', data: {}})
|
|
.then(function (response) {
|
|
requestResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
requestResult.innerHTML = JSON.stringify(error, null, 2);
|
|
})
|
|
|
|
inulaRequest.default.get('http://localhost:3001/')
|
|
.then(function (response) {
|
|
getResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
getResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest('http://localhost:3001/', {method:'POST', name: 'Alice'})
|
|
.then(function (response) {
|
|
postResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
postResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest.put('http://localhost:3001/users', {id: 1, name: 'Bob'})
|
|
.then(function (response) {
|
|
putResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
putResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest.delete('http://localhost:3001/users', {params: {id: 1, test:['{}']}})
|
|
.then(function (response) {
|
|
deleteResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
deleteResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest.head('http://localhost:3001/')
|
|
.then(function (response) {
|
|
headResult.innerHTML = 'Header: ' + JSON.stringify(response.headers['x-powered-by'], null, 2); // IE 浏览器不支持 HEAD 方式访问响应头
|
|
})
|
|
.catch(function (error) {
|
|
headResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest.options('http://localhost:3001/', {
|
|
headers: {
|
|
'Access-Control-Request-Method': 'POST'
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
optionsResult.innerHTML = 'status: ' + JSON.stringify(response.status, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
optionsResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest.patch('http://localhost:3001/', {name: 'IR'})
|
|
.then(function (response) {
|
|
patchResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
patchResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
|
|
inulaRequest.get('http://localhost:3001/download', {
|
|
responseType: 'text',
|
|
onDownloadProgress: function (progressEvent) {
|
|
const loaded = progressEvent.loaded;
|
|
const total = progressEvent.total;
|
|
const progressPercentage = Math.round((loaded / total) * 100);
|
|
downloadProgress.innerHTML = 'Download progress: ' + progressPercentage + '%';
|
|
},
|
|
}).then(function (response) {
|
|
downloadResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
}).catch(function (error) {
|
|
downloadResult.innerHTML = JSON.stringify(error, null, 2);
|
|
})
|
|
});
|
|
|
|
resetButton.addEventListener('click', function () {
|
|
requestResult.innerHTML = '等待发送请求...';
|
|
getResult.innerHTML = '等待发送请求...';
|
|
postResult.innerHTML = '等待发送请求...';
|
|
putResult.innerHTML = '等待发送请求...';
|
|
deleteResult.innerHTML = '等待发送请求...';
|
|
headResult.innerHTML = '等待发送请求...';
|
|
optionsResult.innerHTML = '等待发送请求...';
|
|
patchResult.innerHTML = '等待发送请求...';
|
|
fileInput.value = '';
|
|
uploadProgress.innerHTML = 'UploadProgress: 0%';
|
|
uploadResult.innerHTML = '等待发送请求...';
|
|
downloadProgress.innerHTML = 'DownloadProgress: 0%';
|
|
downloadResult.innerHTML = '等待发送请求...';
|
|
});
|
|
|
|
function uploadFile(file) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
inulaRequest.post('http://localhost:3001/', formData, {
|
|
onUploadProgress: function (progressEvent) {
|
|
const loaded = progressEvent.loaded;
|
|
const total = progressEvent.total;
|
|
const progressPercentage = Math.round((loaded / total) * 100);
|
|
uploadProgress.innerHTML = 'Upload progress: ' + progressPercentage + '%';
|
|
},
|
|
})
|
|
.then(function (response) {
|
|
uploadResult.innerHTML = JSON.stringify(response.data, null, 2);
|
|
})
|
|
.catch(function (error) {
|
|
uploadResult.innerHTML = JSON.stringify(error, null, 2);
|
|
});
|
|
}
|
|
|
|
fileInput.addEventListener('change', function (event) {
|
|
const file = event.target.files[0];
|
|
uploadFile(file);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|