Merge pull request #915 from AndrewBastin/feat/cancel-button

Cancellable Requests

functions/network.js

@@ -1,5 +1,16 @@
-import AxiosStrategy from "./strategies/AxiosStrategy"
+import AxiosStrategy, { cancelRunningAxiosRequest } from "./strategies/AxiosStrategy"
-import ExtensionStrategy, { hasExtensionInstalled } from "./strategies/ExtensionStrategy"
+import ExtensionStrategy, {
+  cancelRunningExtensionRequest,
+  hasExtensionInstalled,
+} from "./strategies/ExtensionStrategy"
+
+export const cancelRunningRequest = (store) => {
+  if (isExtensionsAllowed(store) && hasExtensionInstalled()) {
+    cancelRunningExtensionRequest()
+  } else {
+    cancelRunningAxiosRequest()
+  }
+}
 
 const isExtensionsAllowed = ({ state }) =>
   typeof state.postwoman.settings.EXTENSIONS_ENABLED === "undefined" ||
@@ -13,7 +24,5 @@ const runAppropriateStrategy = (req, store) => {
   return AxiosStrategy(req, store)
 }
 
-const sendNetworkRequest = (req, store) =>
+export const sendNetworkRequest = (req, store) =>
   runAppropriateStrategy(req, store).finally(() => window.$nuxt.$loading.finish())
-
-export { sendNetworkRequest }

functions/strategies/AxiosStrategy.js

@@ -1,16 +1,39 @@
 import axios from "axios"
 
+let cancelSource = axios.CancelToken.source()
+
+export const cancelRunningAxiosRequest = () => {
+  cancelSource.cancel()
+
+  // Create a new cancel token
+  cancelSource = axios.CancelToken.source()
+}
+
 const axiosWithProxy = async (req, { state }) => {
+  try {
     const { data } = await axios.post(
       state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
-    req
+      req,
+      {
+        cancelToken: cancelSource.token,
+      }
     )
     return data
+  } catch (e) {
+    // Check if the throw is due to a cancellation
+    if (axios.isCancel(e)) {
+      throw "cancellation"
+    } else {
+      throw e
+    }
+  }
 }
 
 const axiosWithoutProxy = async (req, _store) => {
+  try {
     const res = await axios({
       ...req,
+      cancelToken: cancelSource.token,
       transformResponse: [
         (data, headers) => {
           // If the response has a JSON content type, try parsing it
@@ -34,6 +57,13 @@ const axiosWithoutProxy = async (req, _store) => {
       ],
     })
     return res
+  } catch (e) {
+    if (axios.isCancel(e)) {
+      throw "cancellation"
+    } else {
+      throw e
+    }
+  }
 }
 
 const axiosStrategy = (req, store) => {

functions/strategies/ExtensionStrategy.js

@@ -7,6 +7,12 @@ export const hasChromeExtensionInstalled = () =>
 export const hasFirefoxExtensionInstalled = () =>
   hasExtensionInstalled() && /Firefox/i.test(navigator.userAgent)
 
+export const cancelRunningExtensionRequest = () => {
+  if (hasExtensionInstalled() && window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest) {
+    window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest()
+  }
+}
+
 const extensionWithProxy = async (req, { state }) => {
   const { data } = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
     method: "post",

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,