vFetch Api
Picture vFetch as an upgraded counterpart to the native Fetch API—essentially, it retains all the familiar properties and functionalities while seamlessly integrating enhanced capabilities and additional features for an elevated user experience.
Examples
To help you get the bigger picture, I will provide some examples to illustrate the differences and similarities between the native Fetch API and the vFetch function.
- Basic usage (GET)
import { vFetch } from "very-good-fetch";
// Native Api
const response = await fetch("http://example.com/posts");
const posts = await response.json();
console.log(posts);
// vFetch
const posts = await vFetch(/* baseURL */ "/posts");
console.log(posts);
- Basic usage (UPDATE)
import { vFetch } from "very-good-fetch";
// Native Api
const response = await fetch("http://example.com/api/users", {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer <KEY>",
},
body: JSON.stringify({
name: "Ahmed Ragab",
age: 22,
}),
});
const newUser = await response.json();
console.log(newUser);
// vFetch
const newUser = await vFetch(/* baseURL */ "/api/users", {
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer <KEY>",
},
body: JSON.stringify({
name: "Ahmed Ragab",
age: 22,
}),
});
console.log(newUser);
✨ Now, I guess you can tell that both are so similar; there isn't much you need to look up.
Now Let talk a bit more about the
vFetch
functionWhy vFetch?
let's dive more into the vFetch function.
📦 All the properties that are exclusive only to the vFetch function will be included inside an object named:
vOptions
.import { vFetch } from "very-good-fetch";
const posts = await vFetch("http://example.com/posts", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer <KEY>",
},
vOptions: {
cache: "memory", // For more details, will be explained below (default: undefined)
responseType: "text", // For more details, will be explained below (default: json)
refreshCache: true, // For more details, will be explained below (default: false)
},
});
vOptions
Key | Type | Description |
---|---|---|
cache | string | will apply sets the cache for the response.Available options so far: memory , session , local . |
cache="memory" | string | will cache the response in the memory and then pull it from there in the next requests if available as long as the urls are the same. |
cache="session" | string | will cache the response in the sessionStorage and then pull it from there in the next requests if available as long as the urls are the same. |
cache="local" | string | will cache the response in the localStorage and then pull it from there in the next requests if available as long as the urls are the same. |
responseType | string | changes how the request should be formatted: json , text , blob , arrayBuffer , formData , pure . |
responseType="pure" | string | meaning that the request shouldn't be formatted and should be returned purely as a Response object. |
refreshCache | boolean | will refresh the old caching if there was one, it's helpful when you have case like user info cached that you need to make sure that it's updated whenever the user changes the setting for example. (ofc, you understand that it's just an example to show case. alright?😶) |