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.

  1. 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);
  1. 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 function
Why 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
KeyTypeDescription
cachestringwill apply sets the cache for the response.Available options so far: memory, session, local.
cache="memory"stringwill 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"stringwill 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"stringwill 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.
responseTypestringchanges how the request should be formatted: json , text , blob , arrayBuffer , formData, pure.
responseType="pure"stringmeaning that the request shouldn't be formatted and should be returned purely as a Response object.
refreshCachebooleanwill 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?😶)