✨ Added HEAD and PATCH methods
This commit is contained in:
Liyas Thomas
201
pages/index.vue
201
pages/index.vue
@@ -6,10 +6,12 @@
|
||||
<label for="method">Method</label>
|
||||
<select id="method" v-model="method">
|
||||
<option>GET</option>
|
||||
<option>HEAD</option>
|
||||
<option>POST</option>
|
||||
<option>PUT</option>
|
||||
<option>DELETE</option>
|
||||
<option>OPTIONS</option>
|
||||
<option>PATCH</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
@@ -26,7 +28,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT'">
|
||||
<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
|
||||
<ul>
|
||||
<li>
|
||||
<label>Content Type</label>
|
||||
@@ -199,8 +201,7 @@
|
||||
</li>
|
||||
<li class="method-list-item">
|
||||
<label for="method">Method</label>
|
||||
<input name="method" type="text" readonly
|
||||
:value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
|
||||
<input name="method" type="text" readonly :value="entry.method" :class="findEntryStatus(entry).className" :style="{'--status-code': entry.status}">
|
||||
<span class="entry-status-code">{{entry.status}}</span>
|
||||
</li>
|
||||
<li>
|
||||
@@ -212,11 +213,11 @@
|
||||
<input name="path" type="text" readonly :value="entry.path">
|
||||
</li>
|
||||
<li>
|
||||
<label for="delete"class="hide-on-small-screen"> </label>
|
||||
<label for="delete" class="hide-on-small-screen"> </label>
|
||||
<button name="delete" @click="deleteHistory(entry)">Delete</button>
|
||||
</li>
|
||||
<li>
|
||||
<label for="use"class="hide-on-small-screen"> </label>
|
||||
<label for="use" class="hide-on-small-screen"> </label>
|
||||
<button name="use" @click="useHistory(entry)">Use</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -229,30 +230,30 @@
|
||||
import section from "../components/section";
|
||||
|
||||
const statusCategories = [{
|
||||
name: 'informational',
|
||||
name: 'informational',
|
||||
statusCodeRegex: new RegExp(/[1][0-9]+/),
|
||||
className: 'info-response'
|
||||
},
|
||||
{
|
||||
name: 'successful',
|
||||
name: 'successful',
|
||||
statusCodeRegex: new RegExp(/[2][0-9]+/),
|
||||
className: 'success-response'
|
||||
},
|
||||
{
|
||||
name: 'redirection',
|
||||
name: 'redirection',
|
||||
statusCodeRegex: new RegExp(/[3][0-9]+/),
|
||||
className: 'redir-response'
|
||||
},
|
||||
{
|
||||
name: 'client error',
|
||||
name: 'client error',
|
||||
statusCodeRegex: new RegExp(/[4][0-9]+/),
|
||||
className: 'cl-error-response'
|
||||
},
|
||||
{
|
||||
name: 'server error',
|
||||
name: 'server error',
|
||||
statusCodeRegex: new RegExp(/[5][0-9]+/),
|
||||
className: 'sv-error-response'
|
||||
},
|
||||
},
|
||||
{
|
||||
// this object is a catch-all for when no other objects match and should always be last
|
||||
name: 'unknown',
|
||||
@@ -261,33 +262,34 @@
|
||||
}
|
||||
];
|
||||
const parseHeaders = xhr => {
|
||||
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
|
||||
const headerMap = {};
|
||||
headers.forEach(line => {
|
||||
const parts = line.split(': ');
|
||||
const header = parts.shift().toLowerCase();
|
||||
const value = parts.join(': ');
|
||||
headerMap[header] = value
|
||||
});
|
||||
return headerMap
|
||||
const headers = xhr.getAllResponseHeaders().trim().split(/[\r\n]+/);
|
||||
const headerMap = {};
|
||||
headers.forEach(line => {
|
||||
const parts = line.split(': ');
|
||||
const header = parts.shift().toLowerCase();
|
||||
const value = parts.join(': ');
|
||||
headerMap[header] = value
|
||||
});
|
||||
return headerMap
|
||||
|
||||
};
|
||||
const findStatusGroup = responseStatus => statusCategories.find(status => status.statusCodeRegex.test(responseStatus));
|
||||
|
||||
export default {
|
||||
components: {
|
||||
components: {
|
||||
'pw-section': section,
|
||||
VirtualList
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
method: 'GET',
|
||||
url: 'https://reqres.in',
|
||||
auth: 'None',
|
||||
path: '/api/users',
|
||||
httpUser: '',
|
||||
httpPassword: '',
|
||||
bearerToken: '',headers: [],
|
||||
data() {
|
||||
return {
|
||||
method: 'GET',
|
||||
url: 'https://reqres.in',
|
||||
auth: 'None',
|
||||
path: '/api/users',
|
||||
httpUser: '',
|
||||
httpPassword: '',
|
||||
bearerToken: '',
|
||||
headers: [],
|
||||
params: [],
|
||||
bodyParams: [],
|
||||
rawParams: '',
|
||||
@@ -368,84 +370,87 @@
|
||||
methods: {
|
||||
findEntryStatus(entry) {
|
||||
let foundStatusGroup = findStatusGroup(entry.status);
|
||||
return foundStatusGroup || {className: ''};
|
||||
},
|
||||
deleteHistory(entry) {
|
||||
this.history.splice(this.history.indexOf(entry), 1)
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history))
|
||||
},
|
||||
clearHistory() {
|
||||
this.history = []
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history))
|
||||
},
|
||||
useHistory({
|
||||
method,
|
||||
url,
|
||||
path
|
||||
}) {
|
||||
this.method = method
|
||||
this.url = url
|
||||
this.path = path
|
||||
this.$refs.request.$el.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
sendRequest() {
|
||||
return foundStatusGroup || {
|
||||
className: ''
|
||||
};
|
||||
},
|
||||
deleteHistory(entry) {
|
||||
this.history.splice(this.history.indexOf(entry), 1)
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history))
|
||||
},
|
||||
clearHistory() {
|
||||
this.history = []
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history))
|
||||
},
|
||||
useHistory({
|
||||
method,
|
||||
url,
|
||||
path
|
||||
}) {
|
||||
this.method = method
|
||||
this.url = url
|
||||
this.path = path
|
||||
this.$refs.request.$el.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
},
|
||||
sendRequest() {
|
||||
if (!this.isValidURL) {
|
||||
alert('Please check the formatting of the URL');
|
||||
return
|
||||
} if (this.$refs.response.$el.classList.contains('hidden')) {
|
||||
this.$refs.response.$el.classList.toggle('hidden')
|
||||
}
|
||||
this.$refs.response.$el.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
if (this.$refs.response.$el.classList.contains('hidden')) {
|
||||
this.$refs.response.$el.classList.toggle('hidden')
|
||||
}
|
||||
this.$refs.response.$el.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
this.previewEnabled = false;
|
||||
this.response.status = 'Fetching...';
|
||||
this.response.body = 'Loading...';
|
||||
const xhr = new XMLHttpRequest();
|
||||
const user = this.auth === 'Basic' ? this.httpUser : null;
|
||||
const password = this.auth === 'Basic' ? this.httpPassword : null;
|
||||
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
|
||||
if (this.auth === 'Bearer Token')
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken
|
||||
);
|
||||
if (this.headers) {
|
||||
this.response.status = 'Fetching...';
|
||||
this.response.body = 'Loading...';
|
||||
const xhr = new XMLHttpRequest();
|
||||
const user = this.auth === 'Basic' ? this.httpUser : null;
|
||||
const password = this.auth === 'Basic' ? this.httpPassword : null;
|
||||
xhr.open(this.method, this.url + this.path + this.queryString, true, user, password);
|
||||
if (this.auth === 'Bearer Token')
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + this.bearerToken);
|
||||
if (this.headers) {
|
||||
this.headers.forEach(function(element) {
|
||||
xhr.setRequestHeader(element.key, element.value)
|
||||
})
|
||||
}
|
||||
if (this.method === 'POST' || this.method === 'PUT') {
|
||||
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
|
||||
xhr.setRequestHeader('Content-Length', requestBody.length);
|
||||
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
|
||||
xhr.send(requestBody);
|
||||
} else {
|
||||
xhr.send();
|
||||
}
|
||||
xhr.onload = e => {
|
||||
this.response.status = xhr.status;
|
||||
const headers = this.response.headers = parseHeaders(xhr);
|
||||
if (this.method === 'POST' || this.method === 'PUT' || this.method === 'PATCH') {
|
||||
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
|
||||
xhr.setRequestHeader('Content-Length', requestBody.length);
|
||||
xhr.setRequestHeader('Content-Type', `${this.contentType}; charset=utf-8`);
|
||||
xhr.send(requestBody);
|
||||
} else {
|
||||
xhr.send();
|
||||
}
|
||||
xhr.onload = e => {
|
||||
this.response.status = xhr.status;
|
||||
const headers = this.response.headers = parseHeaders(xhr);
|
||||
this.response.body = xhr.responseText;
|
||||
if ((headers['content-type'] || '').startsWith('application/json')) {
|
||||
this.response.body = JSON.stringify(JSON.parse(
|
||||
this.response.body ), null, 2);
|
||||
}
|
||||
const n = new Date().toLocaleTimeString();
|
||||
this.history = [{
|
||||
status: xhr.status,
|
||||
time: n,
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
}, ...this.history];
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history));
|
||||
};
|
||||
xhr.onerror = e => {
|
||||
this.response.status = xhr.status;
|
||||
this.response.body = xhr.statusText;
|
||||
if (this.method != 'HEAD') {
|
||||
if ((headers['content-type'] || '').startsWith('application/json')) {
|
||||
this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
|
||||
}
|
||||
},
|
||||
}
|
||||
const n = new Date().toLocaleTimeString();
|
||||
this.history = [{
|
||||
status: xhr.status,
|
||||
time: n,
|
||||
method: this.method,
|
||||
url: this.url,
|
||||
path: this.path
|
||||
}, ...this.history];
|
||||
window.localStorage.setItem('history', JSON.stringify(this.history));
|
||||
};
|
||||
xhr.onerror = e => {
|
||||
this.response.status = xhr.status;
|
||||
this.response.body = xhr.statusText;
|
||||
}
|
||||
},
|
||||
addRequestHeader() {
|
||||
this.headers.push({
|
||||
key: '',
|
||||
|
||||
Reference in New Issue
Block a user