btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ Added HEAD and PATCH methods

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-29 11:25:56 +05:30
parent 4796fe4024
commit d96b734639
1 changed files with 103 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
pages/index.vue
View File

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