From 0cc9471b9d4ed1851f849149c4d52b2f08a588bd Mon Sep 17 00:00:00 2001 From: 3b3ziz Date: Wed, 9 Oct 2019 09:01:00 +0200 Subject: [PATCH 1/6] feat: add CancelToken and isCancel to axios instance --- lib/plugin.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/plugin.js b/lib/plugin.js index e0523eb6..b4f60fd8 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -186,6 +186,8 @@ export default (ctx, inject) => { // Create new axios instance const axios = Axios.create(axiosOptions) + axios.CancelToken = Axios.CancelToken; + axios.isCancel = Axios.isCancel; // Extend axios proto extendAxiosInstance(axios) From 74daad450133d3da58a13c1cce488825c87a1111 Mon Sep 17 00:00:00 2001 From: Amr Abdelkader Date: Mon, 21 Oct 2019 19:46:55 +0200 Subject: [PATCH 2/6] docs: add cancelToken usage in docs --- docs/usage.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/docs/usage.md b/docs/usage.md index dbd4bb42..1f6d732a 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -35,3 +35,54 @@ methods: { } } ``` + +### Cancel token + +You can cancel a request using a *cancel token*. + +> The axios cancel token API is based on the withdrawn [cancelable promises proposal](https://github.com/tc39/proposal-cancelable-promises). + +You can create a cancel token using the `CancelToken.source` factory as shown below: + +```js +const CancelToken = this.$axios.CancelToken; +const source = CancelToken.source(); + +this.$axios.$get('/user/12345', { + cancelToken: source.token +}).catch(function (thrown) { + if (this.$axios.isCancel(thrown)) { + console.log('Request canceled', thrown.message); + } else { + // handle error + } +}); + +this.$axios.$post('/user/12345', { + name: 'new name' +}, { + cancelToken: source.token +}) + +// cancel the request (the message parameter is optional) +source.cancel('Operation canceled by the user.'); +``` + +You can also create a cancel token by passing an executor function to the `CancelToken` constructor: + +```js +const CancelToken = this.$axios.CancelToken; +let cancel; + +this.$axios.$get('/user/12345', { + cancelToken: new CancelToken(function executor(c) { + // An executor function receives a cancel function as a parameter + cancel = c; + }) +}); + +// cancel the request +cancel(); +``` + +> Note: you can cancel several requests with the same cancel token. From e84f0af70f046c04cd48bdda8864afdebbfd5bbc Mon Sep 17 00:00:00 2001 From: Amr Abdelkader Date: Tue, 22 Oct 2019 23:32:59 +0200 Subject: [PATCH 3/6] docs: update docs/usage.md --- docs/usage.md | 48 +++++++++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index 1f6d732a..c0512b37 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -38,31 +38,37 @@ methods: { ### Cancel token -You can cancel a request using a *cancel token*. +You can cancel a request using a _cancel token_. > The axios cancel token API is based on the withdrawn [cancelable promises proposal](https://github.com/tc39/proposal-cancelable-promises). You can create a cancel token using the `CancelToken.source` factory as shown below: ```js -const CancelToken = this.$axios.CancelToken; -const source = CancelToken.source(); +const { CancelToken } = this.$axios; +const source = this.$axios.CancelToken.source(); -this.$axios.$get('/user/12345', { - cancelToken: source.token -}).catch(function (thrown) { - if (this.$axios.isCancel(thrown)) { - console.log('Request canceled', thrown.message); - } else { - // handle error - } -}); - -this.$axios.$post('/user/12345', { - name: 'new name' -}, { - cancelToken: source.token -}) +this.$axios + .$get('/user/12345', { + cancelToken: source.token, + }) + .catch(error => { + if (this.$axios.isCancel(error)) { + console.log('Request canceled', error); + } else { + // handle error + } + }); + +this.$axios.$post( + '/user/12345', + { + name: 'new name', + }, + { + cancelToken: source.token, + }, +); // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.'); @@ -71,14 +77,14 @@ source.cancel('Operation canceled by the user.'); You can also create a cancel token by passing an executor function to the `CancelToken` constructor: ```js -const CancelToken = this.$axios.CancelToken; +const { CancelToken } = this.$axios; let cancel; this.$axios.$get('/user/12345', { - cancelToken: new CancelToken(function executor(c) { + cancelToken: new CancelToken(c => { // An executor function receives a cancel function as a parameter cancel = c; - }) + }), }); // cancel the request From 80316b773d26ab459943742bd59c8de634d0da83 Mon Sep 17 00:00:00 2001 From: Amr Abdelkader Date: Wed, 23 Oct 2019 14:15:10 +0200 Subject: [PATCH 4/6] docs: update docs/usage.md --- docs/usage.md | 49 +++++++++++++++++++++---------------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index c0512b37..bcba732b 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -45,50 +45,43 @@ You can cancel a request using a _cancel token_. You can create a cancel token using the `CancelToken.source` factory as shown below: ```js -const { CancelToken } = this.$axios; -const source = this.$axios.CancelToken.source(); +const source = this.$axios.CancelToken.source() -this.$axios - .$get('/user/12345', { - cancelToken: source.token, +this.$axios.$get('/user/12345', { + cancelToken: source.token +}).catch(error => { + if (this.$axios.isCancel(error)) { + console.log('Request canceled', error) + } else { + // handle error + } +}) + +this.$axios.$post('/user/12345', { + name: 'new name' + }, { + cancelToken: source.token }) - .catch(error => { - if (this.$axios.isCancel(error)) { - console.log('Request canceled', error); - } else { - // handle error - } - }); - -this.$axios.$post( - '/user/12345', - { - name: 'new name', - }, - { - cancelToken: source.token, - }, -); // cancel the request (the message parameter is optional) -source.cancel('Operation canceled by the user.'); +source.cancel('Operation canceled by the user.') ``` You can also create a cancel token by passing an executor function to the `CancelToken` constructor: ```js -const { CancelToken } = this.$axios; -let cancel; +const { CancelToken } = this.$axios +let cancel this.$axios.$get('/user/12345', { cancelToken: new CancelToken(c => { // An executor function receives a cancel function as a parameter - cancel = c; + cancel = c }), -}); +}) // cancel the request -cancel(); +cancel() ``` > Note: you can cancel several requests with the same cancel token. From b92860c68ec37d54508bee5bf82af7bd928371d3 Mon Sep 17 00:00:00 2001 From: Amr Abdelkader Date: Wed, 23 Oct 2019 18:01:15 +0200 Subject: [PATCH 5/6] docs: update docs/usage.md --- docs/usage.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/usage.md b/docs/usage.md index bcba732b..496bd3ff 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -58,10 +58,10 @@ this.$axios.$get('/user/12345', { }) this.$axios.$post('/user/12345', { - name: 'new name' - }, { - cancelToken: source.token - }) + name: 'new name' +}, { + cancelToken: source.token +}) // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.') From 03a7b20a0c3914e285f0405192a3cc7291027149 Mon Sep 17 00:00:00 2001 From: Amr Abdelkader Date: Wed, 23 Oct 2019 18:04:08 +0200 Subject: [PATCH 6/6] style: remove semi-colons --- lib/plugin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/plugin.js b/lib/plugin.js index b4f60fd8..f1d3501a 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -186,8 +186,8 @@ export default (ctx, inject) => { // Create new axios instance const axios = Axios.create(axiosOptions) - axios.CancelToken = Axios.CancelToken; - axios.isCancel = Axios.isCancel; + axios.CancelToken = Axios.CancelToken + axios.isCancel = Axios.isCancel // Extend axios proto extendAxiosInstance(axios)