Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add `CancelToken` and `isCancel` to axios instance #292

Merged
merged 6 commits into from Oct 23, 2019

Conversation

@3b3ziz
Copy link
Contributor

3b3ziz commented Oct 9, 2019

Providing a solution for #271 by adding CancelToken and isCancel to the exported axios instance.

Reference: axios/axios#1330 (comment)

@codecov

This comment has been minimized.

Copy link

codecov bot commented Oct 9, 2019

Codecov Report

Merging #292 into dev will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@         Coverage Diff         @@
##            dev   #292   +/-   ##
===================================
  Coverage   100%   100%           
===================================
  Files         1      1           
  Lines        28     28           
  Branches     13     13           
===================================
  Hits         28     28

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fdb9837...03a7b20. Read the comment docs.

@SaulIO

This comment has been minimized.

Copy link

SaulIO commented Oct 18, 2019

Please make this happen.

@pi0

This comment has been minimized.

Copy link
Member

pi0 commented Oct 21, 2019

The plugin (generated) by axios module (@nuxt/axios) is inside .nuxt directory. So at least it is not a solution for #271 (to import from '@nuxtjs/axios'). Making this shortcut could be nice but I appreciate it if you can also add new usage to the docs. (and mentioning why it makes it easier)

@Amrmak

This comment has been minimized.

Copy link

Amrmak commented Oct 21, 2019

@pi0 would that help ? it's quoted from axios docs

@SaulIO

This comment has been minimized.

Copy link

SaulIO commented on 74daad4 Oct 22, 2019

Add a link to that doc anchor too, please.


```js
const CancelToken = this.$axios.CancelToken;
const source = CancelToken.source();

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member

As we just use it once:

Suggested change
const source = CancelToken.source();
const source = thus.$axios.CancelToken.source();
this.$axios.$get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member
Suggested change
}).catch(function (thrown) {
}).catch((error) => {
cancelToken: source.token
}).catch(function (thrown) {
if (this.$axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member
Suggested change
console.log('Request canceled', thrown.message);
console.log('Request canceled', error.message);
You can create a cancel token using the `CancelToken.source` factory as shown below:

```js
const CancelToken = this.$axios.CancelToken;

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member
Suggested change
const CancelToken = this.$axios.CancelToken;
cancelToken: source.token
}).catch(function (thrown) {
if (this.$axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member
Suggested change
console.log('Request canceled', thrown.message);
console.error('Request canceled:', error);
You can also create a cancel token by passing an executor function to the `CancelToken` constructor:

```js
const CancelToken = this.$axios.CancelToken;

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member
Suggested change
const CancelToken = this.$axios.CancelToken;
const { CancelToken } = this.$axios;
let cancel;
this.$axios.$get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member

Can't we simply instantiate CancelToken outside?

This comment has been minimized.

Copy link
@SaulIO

SaulIO Oct 22, 2019

These are the examples in the axios docs.

Personally I'd leave it as is and state that you're quoting rather than treating these doc as part of this project.

This comment has been minimized.

Copy link
@pi0

pi0 Oct 22, 2019

Member

OK :) But i would suggest update function to arrow

@pi0

This comment has been minimized.

Copy link
Member

pi0 commented Oct 22, 2019

Thanks @Amrmak . Just left some minor comments.

Amr Abdelkader
@Amrmak

This comment has been minimized.

Copy link

Amrmak commented Oct 22, 2019

Thanks @pi0 for the feedback.
Kindly check the applied comments and if you have further comments.

@SaulIO

This comment has been minimized.

Copy link

SaulIO commented on docs/usage.md in e84f0af Oct 23, 2019

They might be using a named function for a reason: eg, see the issue re named functions in event handlers.

I know executor is on some TS interfaces.

Copy link
Member

ricardogobbosouza left a comment

@Amrmak minor comments

Please remove all ;

You can create a cancel token using the `CancelToken.source` factory as shown below:

```js
const { CancelToken } = this.$axios;

This comment has been minimized.

Copy link
@ricardogobbosouza

ricardogobbosouza Oct 23, 2019

Member

No need this line

} else {
// handle error
}
});

This comment has been minimized.

Copy link
@ricardogobbosouza

ricardogobbosouza Oct 23, 2019

Member

Formatting:

this.$axios.$get('/user/12345', {
  cancelToken: source.token
}).catch(error => {
  if (this.$axios.isCancel(error)) {
    console.log('Request canceled', error)
  } else {
    // handle error
  }
})
{
cancelToken: source.token,
},
);

This comment has been minimized.

Copy link
@ricardogobbosouza

ricardogobbosouza Oct 23, 2019

Member

Formatting

this.$axios.$post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token 
})
@SaulIO

This comment has been minimized.

Copy link

SaulIO commented Oct 23, 2019

@Amrmak minor comments

Please remove all ;

Please don't. The no- semi-colon movement is going to make it impossible to optimise JITs someday soon.

Python is a whitespace-organised language. JavaScript isn't and it's going to cause trouble trying to make it one.

@pi0

This comment has been minimized.

Copy link
Member

pi0 commented Oct 23, 2019

@SaulIO We are following standardJS with eslint-config and also docs and examples so it is appreciated to keep it consistent. But of course, it is 100% optional.

PS: I promise no perf advantages are there when code is compiled/transpiled :)

@SaulIO

This comment has been minimized.

Copy link

SaulIO commented Oct 23, 2019

@SaulIO We are following standardJS with eslint-config and also docs and examples so it is appreciated to keep it consistent. But of course, it is 100% optional.

PS: I promise no perf advantages are there when code is compiled/transpiled :)

Sad to see the StandardJS movement adding another victim. :P

As I understand it, ambiguity in syntax makes JITing harder and consistency makes it easier, and global consistencies allow global optimisations: See discussion a here re Dart's choices: dart-lang/sdk#30347 (comment)

But OK, I didn't realise it was project standards, even if I wish you'd gone the other way.

@pi0

This comment has been minimized.

Copy link
Member

pi0 commented Oct 23, 2019

(off-topic) @SaulIO JIT executes the final bundle. No matters how we write original code (with or without semi), webpack, babel and terser transform it to the same output :)

@SaulIO

This comment has been minimized.

Copy link

SaulIO commented Oct 23, 2019

(off-topic) @SaulIO JIT executes the final bundle. No matters how we write original code (with or without semi), webpack, babel and terser transform it to the same output :)

(continuing off-topic) Right, but shouldn't we have a "run anywhere" standard for portability?

Ie, we'd want it to behave the same in tooled vs untooled environments.

Amr Abdelkader
this.$axios.$post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token

This comment has been minimized.

Copy link
@ricardogobbosouza

ricardogobbosouza Oct 23, 2019

Member

Fix indentation

@@ -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;

This comment has been minimized.

Copy link
@ricardogobbosouza
Amr Abdelkader added 2 commits Oct 23, 2019
@pi0
pi0 approved these changes Oct 23, 2019
Copy link
Member

pi0 left a comment

Awesome work ❤️

@pi0 pi0 changed the title feat: add CancelToken and isCancel to axios instance feat: add `CancelToken` and `isCancel` to axios instance Oct 23, 2019
@pi0 pi0 merged commit b9335b1 into nuxt-community:dev Oct 23, 2019
3 checks passed
3 checks passed
ci/circleci Your tests passed on CircleCI!
Details
codecov/patch Coverage not affected when comparing fdb9837...03a7b20
Details
codecov/project 100% remains the same compared to fdb9837
Details
@pi0

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.