From d96b73463991c3d4db67fac97778e693d9b6c00c Mon Sep 17 00:00:00 2001 From: Liyas Thomas Date: Thu, 29 Aug 2019 11:25:56 +0530 Subject: [PATCH] :sparkles: Added HEAD and PATCH methods --- pages/index.vue | 201 +++++++++++++++++++++++++----------------------- 1 file changed, 103 insertions(+), 98 deletions(-) diff --git a/pages/index.vue b/pages/index.vue index 6bac5bc23..997c1b178 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -6,10 +6,12 @@
  • @@ -26,7 +28,7 @@
    • - +
    • @@ -199,8 +201,7 @@
    • - + {{entry.status}}
    • @@ -212,11 +213,11 @@
    • - +
    • - +
    @@ -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: '',