Added ability to cancel requests

lang/en-US.json

@@ -187,6 +187,7 @@
   "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
   "prettify_body": "Prettify body",
   "cancel": "Cancel",
+  "cancelled": "Cancelled",
   "save": "Save",
   "dismiss": "Dismiss",
   "are_you_sure": "Are you sure?",

pages/index.vue

@@ -189,12 +189,25 @@
             </li>
             <li class="shrink">
               <label class="hide-on-small-screen" for="send">&nbsp;</label>
-              <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
+              <button
+                v-if="!runningRequest"
+                :disabled="!isValidURL"
+                @click="sendRequest"
+                id="send"
+                ref="sendButton"
+              >
                 {{ $t("send") }}
                 <span>
                   <i class="material-icons">send</i>
                 </span>
               </button>
+
+              <button v-else @click="cancelRequest" id="send" ref="sendButton">
+                {{ $t("cancel") }}
+                <span>
+                  <i class="material-icons">clear</i>
+                </span>
+              </button>
             </li>
           </ul>
           <div class="blue">
@@ -1332,7 +1345,7 @@ import runTestScriptWithVariables from "../functions/postwomanTesting"
 import parseTemplateString from "../functions/templating"
 import AceEditor from "../components/ui/ace-editor"
 import { tokenRequest, oauthRedirect } from "../assets/js/oauth"
-import { sendNetworkRequest } from "../functions/network"
+import { cancelRunningRequest, sendNetworkRequest } from "../functions/network"
 import { fb } from "../functions/fb"
 import { getEditorLangForMimeType } from "~/functions/editorutils"
 import {
@@ -1450,6 +1463,7 @@ export default {
       files: [],
       filenames: "",
       navigatorShare: navigator.share,
+      runningRequest: false,
 
       settings: {
         SCROLL_INTO_ENABLED:
@@ -2085,6 +2099,9 @@ export default {
       }
       return await sendNetworkRequest(requestOptions, this.$store)
     },
+    cancelRequest() {
+      cancelRunningRequest(this.$store)
+    },
     async sendRequest() {
       this.$toast.clear()
       if (this.settings.SCROLL_INTO_ENABLED) this.scrollInto("response")
@@ -2154,12 +2171,16 @@ export default {
       headers = headersObject
       try {
         const startTime = Date.now()
+
+        this.runningRequest = true
         const payload = await this.makeRequest(
           auth,
           headers,
           requestBody,
           this.showPreRequestScript && this.preRequestScript
         )
+        this.runningRequest = false
+
         const duration = Date.now() - startTime
         this.$toast.info(this.$t("finished_in", { duration }), {
           icon: "done",
@@ -2202,6 +2223,13 @@ export default {
           }
         })()
       } catch (error) {
+        this.runningRequest = false
+
+        // If the error is caused by cancellation, do nothing
+        if (error === "cancellation") {
+          this.response.status = this.$t("cancelled")
+          this.response.body = this.$t("cancelled")
+        } else {
           console.log(error)
           if (error.response) {
             this.response.headers = error.response.headers
@@ -2220,7 +2248,10 @@ export default {
               preRequestScript: this.preRequestScript,
             }
 
-          if ((this.preRequestScript && this.showPreRequestScript) || hasPathParams(this.params)) {
+            if (
+              (this.preRequestScript && this.showPreRequestScript) ||
+              hasPathParams(this.params)
+            ) {
               let environmentVariables = getEnvironmentVariablesFromScript(this.preRequestScript)
               environmentVariables = addPathParamsToVariables(this.params, environmentVariables)
               entry.path = parseTemplateString(entry.path, environmentVariables)
@@ -2254,6 +2285,7 @@ export default {
             }
           }
         }
+      }
       // tests
       const syntheticResponse = {
         status: this.response.status,