Git Product home page Git Product logo

vue-polling's Introduction

๐Ÿ”” vue-polling

Build Status

Easy to use polling service built with vue.

๐Ÿšš Installation

yarn add vue-polling

or

npm i vue-polling --save

โšก๏ธ Usage

<template>
    <VuePolling 
    url="url to poll"
    :interval="3000"
    :retryCount="3" // this is optional
    :onSuccess="handleSuccess" 
    :onFailure="handleFailure" // this is optional
    :method="GET"
    :headers="headers object" // this is optional
    :body="JSON.stringify(data)" // data to send in a post call. Should be stringified always
  >
    <div slot="vue-polling" slot-scope="{ isPolling, startPolling, stopPolling }">
      <p v-if="isPolling">Hi I am polling</p>
      <p v-else>Hi I am not polling</p>
    </div>
  </VuePolling>
</template>
<script>
import VuePolling from "VuePolling";

export default {
  name: "App",
  components: {
    VuePolling
  },
  methods: {
    handleSuccess(response) {
      const { data } = response;
      if (data) {
        const { status } = data;
        if (status === "awaiting_product_selection") {
          return true;
        } else {
          return false;
        }
      }
    },
    handleFailure() {
      return true;
    }
  }
};
</script>

๐Ÿ“’ Api

๐Ÿ”” vue-polling

Props Type Default Description
url string null url/api to poll
interval number 3000 Interval of polling
retryCount number 0 Number of times to retry when an api polling call fails
onSuccess function - Callback function on successful polling. This should return true to continue polling
onFailure function () => {} Callback function on failed polling or api failure
method string GET HTTP Method of the api to call
headers object - Any specific http headers that need to be sent with the request
body object - The data that need to be sent in a post/put call

onSuccess (required)

This function will be called every time the polling service gets a successful response. You should return true to continue polling and false to stop polling. It has the following signature:

function onSuccess(response) {
  // You can do anything with this response, may be add to an array of some state of your vue component
  // return true to continue polling
  // return false to stop polling
}

onFailure (not compulsory field)

This function will be called every time the polling service gets a failure response from the api, it can be 401 or 500 or any failure status code. You can do some cleaning up of your variables or reseting the state here.

function onFailure(error) {
  // You can log this error to some logging service
  // clean up some state and variables.
}

๐Ÿ‘ Contribute

Show your โค๏ธ and support by giving a โญ. Any suggestions and pull request are welcome !

๐Ÿ“ License

MIT ยฉ viveknayyar

๐Ÿ‘ท TODO

  • Complete README
  • Add Examples and Demo
  • Test Suite

vue-polling's People

Contributors

vivek12345 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

vue-polling's Issues

Problem installing package due to identical package names (and not available on npmjs)

Hey,

I'm having problems finding and installing your package using NPM or the Vue UI because there exists another package with the exact same name. Additionally you're package also doesn't show up when searching for dependencies in the Vue UI.

When installing with npm i vue-polling --save it installs this npm package instead:
https://github.com/straightdave/vue-polling

Appearantly your package is not on npmjs.com, so to make your package accessible I'd suggest making it available there.

I'd also suggest the name vue-easy-polling, but that's just subjective, so feel free to ignore.

Hopefully you can help me out.

Kind regards
HackXIt

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.