examples/cancellablePromise.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.config.devtools = true;
    </script>
  </head>
  <body>
    <div id="app">
      <div>
        <label for="delayPromise">
          Delay seconds
        </label>
        <input name="delayPromise" v-model="delay" />
      </div>
      <div>
        <button @click="exec(delay)" :disabled="loading">Execute</button>
        <button @click="cancel()" :disabled="!loading">
          Cancel
        </button>
      </div>

      <div v-if="loading">
        loading...
      </div>
      <div v-else-if="cancelled">
        <p>Request cancelled</p>
        <p>Result: {{ result }}</p>
        <p>Error: {{ error }}</p>
      </div>
      <div v-else>
        <p>Result: {{ result }}</p>
        <p>Error: {{ error }}</p>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@0.3.2/dist/vue-composition-api.umd.js"></script>
    <script>
      // add composition api to vue
      Vue.use(vueCompositionApi.default);
    </script>
    <script src="../dist/vue-composable.umd.js"></script>
    <script>
      const { useCancellablePromise } = vueComposable;
      const { computed, ref, watch } = vueCompositionApi;

      new Vue({
        el: "#app",

        setup() {
          const {
            exec,
            loading,
            cancel,
            error,
            cancelled,
            result
          } = useCancellablePromise(delay =>
            fetch(`https://reqres.in/api/users?delay=${delay}`)
              .then(x => x.json())
          );

          const delay = ref(1);
          return {
            delay,
            exec,
            error,
            loading,
            cancel,
            cancelled,
            result
          };
        }
      });
    </script>
  </body>
</html>