npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-axios-duplicate-blocker

v1.1.1

Published

Block duplicate axios requests using interceptors and return results using promises

Downloads

284

Readme

nuxt-axios-duplicate-blocker

Nuxt module that adds axios interceptors in order to block duplicate API requests and return results from the latest request to all callee functions. It can also be optionally used to cancel active requests when switching between pages.

How it works

Using axios interceptors, each axios request generates a requestKey that serves as an Identifier for this request. By default this requestKey is based on its url and parameter names (not values). You can also specify your own requestKey if the default does not suit your needs (see Axios Request Configuration Options bellow)

When a new request is made that has the same requestKey with an active request, the active request is canceled returning a promise pointing to the new request. When that request finishes it resolves the promise, so all previously canceled requests now return the latest results back to their caller functions.

Also, all active requests are cancelled by default when switching between pages. You can change this behaviour from the module options (see Module Options bellow)

Setup

  • Add nuxt-axios-duplicate-blocker dependency to your project using yarn or npm
  • Add nuxt-axios-duplicate-blocker to modules section of nuxt.config.js

:exclamation: IMPORTANT: Add it BEFORE including the axios module in nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-axios-duplicate-blocker',

    // With options
    ['nuxt-axios-duplicate-blocker', { /* module options */ }],
    
    // Axios module must be added AFTER 'nuxt-axios-duplicate-blocker'
    '@nuxtjs/axios'
 ]
}

Module Options

Option | Type | Default | Description --- | --- | --- | --- debug | Boolean | this.options.dev (true for development false for production) | If set to true it will always show a warning in console whenever a request has been blocked. onPageChange | Boolean | true | If set to true all active API requests will be canceled when switching pages. blockByDefault | Boolean | true | Sets the default policy for blocking requests. If set to true all requests will be blocked unless specified otherwise in the request configuration of a call with the blockAllowed option. headerBlockerKey | String | <empty> | Set the key in headers section of Axios's request configuration, to be used as the container of the request configuration options for this module. Read the important note below for more details.

Axios Request Configuration Options

:exclamation: Please read the note below if these options do not work.

Option | Type | Default | Description --- | --- | --- | --- requestKey | String | url:parameterName1|parameterName2|... | You can optionally provide a custom request key for specifying requests that should not block each other by adding an ID to a configuration object for an axios call. blockAllowed | Boolean | true | You can optionally use this parameter to override the default policy for blocking requests, set in module options with blockByDefault.

Example:

await this.$axios.$get('/example-api/example', {
    params: { ... },
    requestKey: 'customRequestKeyName',
    blockAllowed: false
});

:exclamation: IMPORTANT NOTE

In version 0.19.0, axios module introduced a breaking change that disallows extra parameters to be added in the request configuration object. There is a ticket about this issue here and a fix but it has not been officially released by the time of this writing.

Until the official release of this fix, in order to make the custom request options for this module work again, you must set the headerBlockerKey property in Module Options to a string that will be used for passing them as a property in the headers section of the Request Configuration Options. This property will be deleted from the headers section before the request is sent.

Example:

In nuxt.config.js

{
  modules: [
    ['nuxt-axios-duplicate-blocker', {
        headerBlockerKey: 'blocker'
    }]
 ]
}

In the axios call:

await this.$axios.$get('/example-api/example', {
    params: { ... },
    headers: { 
        blocker: {
            requestKey: 'customRequestKeyName',
            blockAllowed: false
        }
    }
});

This feature will be removed in the next major release of this module so use the ^ sign, in your package.json dependency in order to avoid compatibility issues.

License

MIT License

Copyright (c) Marios Vertopoulos