Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
vue-request
Advanced tools
Vue composition API for data fetching, supports SWR, polling, error retry, cache request, pagination and other cool features.
English | 简体中文
⚡️ Vue composition API for data fetching, supports SWR, polling, error retry, cache request, pagination, etc.
Currently in RC version. For details, please see the changelog.
In the past projects, they were often confused by repeated implementations such as the management of the loading state, the requested throttling and debounce, the caching of request data, and pagination. Whenever we start a new project, we have to manually deal with the above problems, which will be a repetitive work, but also to ensure that the team is consistent.
VueRequest aims to provide developers with a convenient and fast way to manage the state of the request API. In the development, save repetitive work, and it can be used only with a simple configuration, focusing on the core of the development project.
You can install VueRequest with NPM, YARN, or a <script>
via unpkg.com
npm install vue-request@next
# or
yarn add vue-request@next
# or
pnpm install vue-request@next
For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
<script src="https://unpkg.com/vue-request@next/dist/vue-request.min.js"></script>
Once you've added this you will have access to the window.VueRequest
object and its exports.
<template>
<div>
<div v-if="loading">loading...</div>
<div v-if="error">failed to fetch</div>
<div v-if="data">Hey! {{ data }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const { data, loading, error } = useRequest(service);
return {
data,
loading,
error,
};
},
});
</script>
In this example, useRequest
accepts a service
function. service
is a asynchronous function. In other words, you can use axios to fetch data and return a Promise. More specific instructions can be viewed in document.
useRequest
also return 3 values: data
, loading
and error
. When the request is not yet finished, data will be undefined
and loading
will be true
. And when we get a response, it sets data and error based on the result of service and rerenders the component. This is because data
and error
are Reactivity(Refs), and their values will be set by the service response.
VueRequest has many features, such as error retry, cache, pagination, throttle, debounce..., here are two cool features
Sometimes, you need to ensure data consistency between multiple browser windows; or when the user's computer is reactivated in the dormant state, the page data needs to be synchronized to the latest state. refreshOnWindowFocus
may save you a lot of code. Click here to go to the document
const { data, error, run } = useRequest(getUserInfo, {
refreshOnWindowFocus: true,
refocusTimespan: 1000, // refresh interval 1s
});
Sometimes, you want to ensure that data is synchronized and updated between multiple devices. At this time, we can use the pollingInterval
provided by us to periodically re-request the request API, so that the data consistency between multiple devices can be guaranteed. When the user modifies the data, the two windows will be updated simultaneously in real time. Click here to go to the document
const { data, error, run } = useRequest(getUserInfo, {
pollingInterval: 1000, // polling interval 1s
});
Thank them for inspiring us.
MIT License © 2020-present AttoJS
FAQs
This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc.
The npm package vue-request receives a total of 2,072 weekly downloads. As such, vue-request popularity was classified as popular.
We found that vue-request demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.