saitergun · March 26, 2020 08:04
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>axios cancel</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css" />
 </head>
 <body class="pt-12">
  <div id="app">
    <header class="h-12 fixed left-0 top-0 right-0 flex items-center justify-start bg-indigo-500">
      <button
        class="bg-indigo-700 text-white text-sm rounded leading-none px-3 py-2 mx-2"
        @click="send"
        v-if="!sending"
      >Send Request</button>

      <button
        class="bg-indigo-700 text-white text-sm rounded leading-none px-3 py-2 mx-2"
        @click="cancelToken.cancel('Cancel message')"
        v-if="sending"
      >Cancel Request</button>
    </header>

    <div class="text-5xl p-8">
      <p v-if="sending">⏳</p>
      <p v-else-if="canceled">❌</p>
      <p v-else-if="succeed">✅</p>
      <p v-else>request waiting</p>

      <small v-if="errorMessage">{{ errorMessage }}</small>
    </div>
  </div>

  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',

      data: () => ({
        cancelToken: null,

        sending: false,
        canceled: false,
        succeed: false,
        errorMessage: null,
      }),

      methods: {
        async send() {
          this.cancelToken = axios.CancelToken.source();
          this.sending = true;
          this.canceled = false;
          this.succeed = false;
          this.errorMessage = null;

          try {
            const response = await axios.get('https://reqres.in/api/users?delay=1', {
              cancelToken: this.cancelToken.token
            });

            this.succeed = true;
          } catch (err) {
            if (axios.isCancel(err)) {
              this.errorMessage = err.message;
              this.canceled = true;
            } else {
              this.errorMessage = err.message || 'an error occured';
            }
          } finally {
            this.sending = false;
          }
        },
      }
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>axios cancel</title>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css" />
	</head>
	<body class="pt-12">
	<div id="app">
	<header class="h-12 fixed left-0 top-0 right-0 flex items-center justify-start bg-indigo-500">
	<button
	class="bg-indigo-700 text-white text-sm rounded leading-none px-3 py-2 mx-2"
	@click="send"
	v-if="!sending"
	>Send Request</button>

	<button
	class="bg-indigo-700 text-white text-sm rounded leading-none px-3 py-2 mx-2"
	@click="cancelToken.cancel('Cancel message')"
	v-if="sending"
	>Cancel Request</button>
	</header>

	<div class="text-5xl p-8">
	<p v-if="sending">⏳</p>
	<p v-else-if="canceled">❌</p>
	<p v-else-if="succeed">✅</p>
	<p v-else>request waiting</p>

	<small v-if="errorMessage">{{ errorMessage }}</small>
	</div>
	</div>

	<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
	<script>
	new Vue({
	el: '#app',

	data: () => ({
	cancelToken: null,

	sending: false,
	canceled: false,
	succeed: false,
	errorMessage: null,
	}),

	methods: {
	async send() {
	this.cancelToken = axios.CancelToken.source();
	this.sending = true;
	this.canceled = false;
	this.succeed = false;
	this.errorMessage = null;

	try {
	const response = await axios.get('https://reqres.in/api/users?delay=1', {
	cancelToken: this.cancelToken.token
	});

	this.succeed = true;
	} catch (err) {
	if (axios.isCancel(err)) {
	this.errorMessage = err.message;
	this.canceled = true;
	} else {
	this.errorMessage = err.message \|\| 'an error occured';
	}
	} finally {
	this.sending = false;
	}
	},
	}
	});
	</script>
	</body>
	</html>