# Fetch
Component name: <v-fetch>
A simple, declarative, and composable way to fetch data.
# Examples
# Simple GET request
In the following example we are fetching a list of repositories (limited to 5) from the Vue.js Github organisition.
# Loop through list
In the following example we are fetching and looping through a list of repositories (limited to 10) from the Vue.js Github organisition.
# GET request with querystring
In the following example we set the per_page and page parameters using the query property.
This allows us to update parameters easily and get an updated response.
# POST request
In the following example we are fetching and looping through a list of repositories (limited to 10) from the Vue.js Github organisition.
# API
Name | Type | Description | Default |
---|---|---|---|
method | String | Indicates the request method to be performed on the target resource (The most common ones being GET , POST , PUT , PATCH or DELETE ) | GET |
url | String | URL of the resource you want to fetch. The response must be valid JSON. | - |
with-credentials | Boolean | By default, cookies will not be sent or received, resulting in unauthenticated requests if the site relies on maintaining a user session. This setting allows both CORS and same origin requests to work with cookies. | false |
query | Object | The Object to be encoded as querystring parameters in request's URL. | {} |
data | Object | The Object to be transmited as JSON in request's body. | {} |
url-change-loading-state-on | Boolean | Enables loading state when url changes after the initial fetch. | false |
cache | Boolean or Number | Wether or not the request should be cached and re-used. true will cache forever. Number will set the amount of miliseconds to cache the result. | false |
# Scoped Slot
In order to access the fetched data, we're exposing a response
object using Scoped slots (opens new window).
The response
object contains the following information:
Name | Type | Description |
---|---|---|
loading | Boolean | Indicates whether or not data is loading. |
status | Number | Contains the status code of the response, e.g. 404 for a not found resource, 200 for a success. |
ok | Boolean | Returns true if the request received a status in the OK range (200-299). |
data | Object | The (parsed) JSON response that was provided by the server. |