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

33
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>
@@ -279,7 +280,7 @@
'pw-section': section, 'pw-section': section,
VirtualList VirtualList
}, },
data () { data() {
return { return {
method: 'GET', method: 'GET',
url: 'https://reqres.in', url: 'https://reqres.in',
@@ -287,7 +288,8 @@
path: '/api/users', path: '/api/users',
httpUser: '', httpUser: '',
httpPassword: '', httpPassword: '',
bearerToken: '',headers: [], bearerToken: '',
headers: [],
params: [], params: [],
bodyParams: [], bodyParams: [],
rawParams: '', rawParams: '',
@@ -368,7 +370,9 @@
methods: { methods: {
findEntryStatus(entry) { findEntryStatus(entry) {
let foundStatusGroup = findStatusGroup(entry.status); let foundStatusGroup = findStatusGroup(entry.status);
return foundStatusGroup || {className: ''}; return foundStatusGroup || {
className: ''
};
}, },
deleteHistory(entry) { deleteHistory(entry) {
this.history.splice(this.history.indexOf(entry), 1) this.history.splice(this.history.indexOf(entry), 1)
@@ -394,7 +398,8 @@
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')) { }
if (this.$refs.response.$el.classList.contains('hidden')) {
this.$refs.response.$el.classList.toggle('hidden') this.$refs.response.$el.classList.toggle('hidden')
} }
this.$refs.response.$el.scrollIntoView({ this.$refs.response.$el.scrollIntoView({
@@ -408,14 +413,13 @@
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`);
@@ -427,9 +431,10 @@
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 (this.method != 'HEAD') {
if ((headers['content-type'] || '').startsWith('application/json')) { if ((headers['content-type'] || '').startsWith('application/json')) {
this.response.body = JSON.stringify(JSON.parse( this.response.body = JSON.stringify(JSON.parse(this.response.body), null, 2);
this.response.body ), null, 2); }
} }
const n = new Date().toLocaleTimeString(); const n = new Date().toLocaleTimeString();
this.history = [{ this.history = [{