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

axios-smart

v1.0.3

Published

axios smart

Downloads

36

Readme

axios-smart

NPM version NPM downloads

中文文档

Install

$ yarn install axios-smart

Usage

axios-smart is a collection of small features.

  • axios-cancel-repeat

The first time the request is sent, then the query condition is modified so that the second request is sent even though the first request has not yet finished. At this point, the return result of the first request becomes worthless and we should cancel the first request.

Once you use axios-smart, the axios-cancel-repeat feature is automatically available, and you cannot cancel it.

import axios from 'axios'
import { axiosSmart } from 'axios-smart'

axiosSmart(axios)

In development, the same interface is sent multiple times. You can add the cancelRepeatId parameter.

axios.all([1,2,3].map(item => {
  return axios.get('https://httpbin.org/delay/5', { cancelRepeatId: item })
})).then(result => {
  console.log('result', result)
})

You can also use the cancelRepeat parameter.

axios.all([1,2,3].map(item => {
  return axios.get('https://httpbin.org/delay/5', { cancelRepeat: true })
})).then(result => {
  console.log('result', result)
})

The difference between cancelRepeatId and cancelRepeat:

If the previous interface is not completed, click the button again. cancelRepeatId will cancel the previous interface retransmission request

cancelRepeatId

cancelRepeat does not cancel the previous request.

cancelRepeat

  • axios-cancel-pending

To jump from one page to another, uncompleted requests on the first page should be canceled.

You can customize how to cancel requests in any project.

import axios from 'axios'
import { axiosSmart, cancelPending } from 'axios-smart'

axiosSmart(axios)

// Cancel all currently pending requests
cancelPending()

Here's an example in react:

import axios from 'axios'
import { axiosSmart, useCancelPendingWhenLeavePage } from 'axios-smart'

/**
 *  useCancelPendingWhenLeavePage(): cancelPending() is also called internally
 * 
 *  useEffect(() => {
 *      return () => {
 *          cancelPending()
 *      }
 *  }, [ window.location.pathname ])
 */
useCancelPendingWhenLeavePage()

axiosSmart(axios)

axios.get('https://httpbin.org/status/503')
  • axios-retry

Sometimes, due to unstable network, the first request fails, and the second request is successful after refreshing the page.

What axios-retry does is when the request fails, it is automatically resent twice.

If you do not want to resend the request, you can set it as follows.

import axios from 'axios'
import { axiosSmart } from 'axios-smart'

axiosSmart(axios, {
    retry: {
        enable: false,       // default value is true
    }
})

axios.get('https://httpbin.org/status/503')

retry.retries: Defines the number of retries. The default value is 2

retry.retryCondition: Define the retry condition, the default is that the status code is not equal to 200 will retry

axiosSmart(axios, {
    retry: {
        enable: true,       // default value is true
        retries: 2,         // default value is 3
        retryCondition: (error: AxiosError) => error.response?.status !== 200,
    }
})
  • axios-loading

When a request is sent, a progress bar is automatically added at the top of the browser.

If you change the query condition and resent the request, the progress bar will reset and start again.

When all the requests are finished, the progress bar will disappear automatically.

If you don't want this feature, you'll need to turn it off manually.

import axios from 'axios'
import { axiosSmart } from 'axios-smart'
import 'axios-smart/dist/esm/axios-smart.css'

axiosSmart(axios, {
    loading: {
        enable: false,       // default value is true
    }
})

axios.get('https://httpbin.org/delay/5')

You can use the loadingBar alone anywhere

import { loadingBar } from 'axios-smart'

loadingBar.start()
loadingBar.done()

If you need to change the style of the progress bar, you can override these class names directly in the global css file

.axios-smart-progress-bar {
  position: fixed;
  z-index: 99999999;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #ec7765;
}

.axios-smart-progress-bar-animation {
  animation: axios-smart-progress-bar-loading 60s ease-out;
  animation-fill-mode: forwards;
}

@keyframes axios-smart-progress-bar-loading {
  0% {
    width: 1%;
  }

  100% {
    width: 98%;
  }
}

Development

$ git clone [email protected]:dkvirus/axios-smart.git
$ cd axios-smart
$ yarn
$ yarn dev

You can modify the source code in the src directory and open test/axios-smart.html to test it.

LICENSE

MIT