@bryanochoa/custom-fetch-api 1.0.3 → 2.0.1

package/README.md

@@ -4,6 +4,8 @@ Este proyecto utiliza la funcionalidad nativa del FETCH API para realizar solici
 
 Cabe aclarar que este proyecto no es un reemplazo completo del FETCH API, sino una capa adicional que facilita su uso en ciertos escenarios. El proyecto sigue en construcción y esta sujeto a cambios y mejoras continuas. De momento, se encuentra en una fase inicial de desarrollo y se espera que evolucione con el tiempo.
 
+Recientemente he agregado una version alterna dentro del mismo paquete, cuya funcionalidad asemeja como trabaja axios, si bien no funcionan y no integra todo lo que ofrece axios, resulta una alternativa a mi parecer mucho mas funcional que la primera version que lance. Esta nueva versión resuelve un par de detalles como lo son el manejo de la url de la api y la persistencia del token en caso de ser enviado en la peticion. A continuación te muestro la nueva forma de trabajar con este paquete, no obstante puedes continuar trabajando en la primera version que igual continuare dando soporte y agregando funcionalidades hasta donde la logica y el fetch me lo permitan.
+
 ### Instalación
 
 ```bash
@@ -23,25 +25,121 @@ pnpm add @bryanochoa/custom-fetch-api
 ```bash
 yarn add @bryanochoa/custom-fetch-api
 
+
+```
+
+## Versión 2 implementación mediante clase CustomFetchAPI
+
+Para esta nueva versión el enfoque se hace mediante una clase cuya instancia maneja las peticiones http más comunes(GET,POST,PUT,PATCH,DELETE), cada verbo contiene su metodo respectivo en la instancia.
+
+---
+
+**Ejemplo de uso**
+
+- Peticion GET:
+
+```
+import {CustomFetchAPI} from "@bryanochoa/custom-fetch-api"
+
+const  fetcher = new  CustomFetchAPI({
+baseUrl:  "https://api.example.com",
+});
+const  data = await  fetcher.get("/data");
+console.log(data, "DATA");
+```
+
+- Petición POST:
+
+```
+import {CustomFetchAPI} from "@bryanochoa/custom-fetch-api"
+
+const  fetcher = new  CustomFetchAPI({
+baseUrl:  "https://api.example.com",
+});
+const  data = await  fetcher.post("/data",{
+body:{}
+});
+```
+
+- Petición PUT:
+
+```
+import {CustomFetchAPI} from "@bryanochoa/custom-fetch-api"
+
+const  fetcher = new  CustomFetchAPI({
+baseUrl:  "https://api.example.com",
+});
+const  data = await  fetcher.put("/data/1",{
+body:{}
+});
+```
+
+- Petición DELETE:
+
+```
+import {CustomFetchAPI} from "@bryanochoa/custom-fetch-api"
+
+const  fetcher = new  CustomFetchAPI({
+baseUrl:  "https://api.example.com",
+});
+const  data = await  fetcher.delete("data/1");
+```
+
+## Manejo del token
+
+En este nuevo enfoque al ser una instancia de una clase, cuenta con metodos para colocar o remover el token en la peticion http se configura de la siguiente forma. Puedes configurar la persistencia del token en localStorage o sessionStorage desde la instancia de la clase y asi no tener que colocarlo en cada peticion donde tengas que colocar el token, esta configuracion es opcional,si no la configuras en este punto puedes hacerlo desde el metodo de la instancia setToken() su segundo parametro es un objeto de configuracion que te permite configurar la persistencia del token en localStorage o sessionStorage, si no lo configuras el token se colocara en la peticion pero no se guardara en ningun lado y tendras que colocarlo en cada peticion donde sea necesario.
+
 ```
+import {CustomFetchAPI} from "@bryanochoa/custom-fetch-api"
+
+const fetcher = new CustomFetchAPI({
+baseUrl: "https://api.example.com",
+// safeTokenOn:{
+// keyname:"token",
+// storage:"sessionStorage | localStorage "
+// }
+});
+//agregar token a localStorage/sessionStorage
+fetcher.setToken("token_here",{
+storage:"localStorage",
+keyname:"token"
+})
+
+//eliminar token
+fetcher.removeToken()
+
+```
+
+En esta nueva implementación del manejo del token, te permite configurar la persistencia del token ya sea en local storage o en session storage una vez colocado el token intento emular el comportamiento de axios con los interceptores, al mandar el token si existe en todas las peticiones mediante el header de Authorization todo eso lo hace automaticamente ya que es el caso mas común de enviar el token en una api.
+
+En conclusión, esta nueva versión de la librería ofrece una forma más estructurada y flexible de realizar solicitudes HTTP, con un manejo más eficiente del token de autenticación y una interfaz más clara para interactuar con APIs externas.
+
+## ¿Y entonces, que enfoque deberia elegir?
+
+Ten encuenta que la primera versión esta enfocada en realizar peticiones HTTP ya sea desde el frontend o el backend (en versiones de nodejs que ya soporten el fetch api) y en esta nueva implementación el enfoque incluye la persistencia del token mediante localStorage o sessionStorage, por lo que si tu proyecto requiere de esta funcionalidad te recomiendo utilizar la segunda versión, en caso contrario puedes seguir utilizando la primera versión que igual seguirá recibiendo soporte y mejoras hasta donde la logica y el fetch api nativo me lo permita.
+
+## Versión 1 función makeApiRequest()
 
 - Ejemplo de uso
 
 Petición GET:
 
 ```
+
 const data = await makeApiRequest('https://api.example.com/data');
+
 ```
 
 Petición POST:
 
 ```
+
 const data = await makeApiRequest('https://api.example.com/data', {
-  method: 'POST',
+method: 'POST',
 
-  body: {
-    key: 'value'
-  }
+body: {
+key: 'value'
+}
 });
 
 ```
@@ -49,6 +147,7 @@ const data = await makeApiRequest('https://api.example.com/data', {
 Petición PUT:
 
 ```
+
 const data = await makeApiRequest('https://api.example.com/data', {
 method: 'PUT',
 body: {
@@ -61,9 +160,10 @@ key: 'value'
 Si tu peticion maneja tokens de autenticación, puedes incluirlos en el objeto de configuración:
 
 ```
+
 const data = await makeApiRequest('https://api.example.com/data', {
 method: 'GET',
-token:"Bearer your_token_here"
+token:"your_token_here"
 });
 
 ```
@@ -94,12 +194,12 @@ interface ApiResponse {
 id: number;
 name: string;}
 
-
 ```
 
 Petición GET:
 
 ```
+
 const data = await makeApiRequest<ApiResponse>('https://api.example.com/data');
 
     console.log(data.id);
@@ -115,3 +215,7 @@ Por ultimo, se puede cambiar el content-type de la solicitud HTTP, por defecto s
 No lo mencione en ejemplos anteriores pero por defecto, las peticiones de tipo POST,PUT,PATCH la propiedad body se convierte automáticamente a JSON por ende es obligatorio que para esta propiedad se pase un objeto, de lo contrario la petición fallara.
 
 El proyecto se encuentra en constante desarrollo y se espera que se agreguen más funcionalidades y mejoras en el futuro.
+
+```
+
+```

package/dist/index.d.mts

@@ -9,4 +9,45 @@ interface RequestOptions {
 }
 declare function makeApiRequest<T>(url: string, options?: RequestOptions): Promise<T>;
 //#endregion
-export { makeApiRequest };
+//#region src/fetchByClass.d.ts
+interface CustomFetchSearchParams {
+  searchParams?: Record<string, any>;
+}
+type ContentType = "application/json" | "FormData";
+interface CustomFetchOptions extends CustomFetchSearchParams {
+  body?: any;
+  contentType?: ContentType;
+}
+interface BaseOptions {
+  baseUrl?: string;
+  safeTokenOn?: SafeTokenOn;
+}
+type SafeTokenOn = LocalStorageOptionsConfig | SessionStorageOptionsConfig;
+type LocalStorageOptionsConfig = {
+  storage?: "localStorage";
+  keyname: string;
+};
+type SessionStorageOptionsConfig = {
+  storage?: "sessionStorage";
+  keyname: string;
+};
+declare class CustomFetchAPI {
+  private baseUrl?;
+  private token?;
+  private headers;
+  private optionRequest;
+  private safeTokenOn?;
+  constructor(options?: BaseOptions);
+  get<T>(url: string, searchParams?: CustomFetchSearchParams): Promise<T>;
+  post<T>(url: string, { searchParams, body, contentType }: CustomFetchOptions): Promise<T>;
+  put<T>(url: string, { searchParams, body, contentType }: CustomFetchOptions): Promise<T>;
+  patch<T>(url: string, { searchParams, body, contentType }: CustomFetchOptions): Promise<T>;
+  delete<T>(url: string): Promise<T>;
+  private setBody;
+  private setParams;
+  private verifyTokenWereSet;
+  setToken(token: string, safeTokenOn?: SafeTokenOn): void;
+  removeToken(): void;
+}
+//#endregion
+export { BaseOptions, CustomFetchAPI, CustomFetchOptions, makeApiRequest };

package/dist/index.mjs

@@ -21,4 +21,108 @@ async function makeApiRequest(url, options) {
 	return await (await fetch(finalUrl, optionRequest)).json();
 }
 //#endregion
-export { makeApiRequest };
+//#region src/fetchByClass.ts
+var CustomFetchAPI = class {
+	baseUrl;
+	token;
+	headers;
+	optionRequest;
+	safeTokenOn;
+	constructor(options) {
+		const headers = new Headers();
+		if (options?.baseUrl) this.baseUrl = options.baseUrl;
+		this.headers = headers;
+		this.optionRequest = { headers: this.headers };
+		if (options?.safeTokenOn) this.safeTokenOn = options.safeTokenOn;
+	}
+	async get(url, searchParams) {
+		this.verifyTokenWereSet();
+		const finalUrl = this.setParams(url, { searchParams });
+		return await (await fetch(finalUrl, this.optionRequest)).json();
+	}
+	async post(url, { searchParams, body, contentType }) {
+		this.verifyTokenWereSet();
+		this.optionRequest.method = "POST";
+		this.setBody(body, contentType);
+		const finalUrl = this.setParams(url, searchParams);
+		return await (await fetch(finalUrl, this.optionRequest)).json();
+	}
+	async put(url, { searchParams, body, contentType }) {
+		this.verifyTokenWereSet();
+		this.optionRequest.method = "PUT";
+		this.setBody(body, contentType);
+		const finalUrl = this.setParams(url, searchParams);
+		return await (await fetch(finalUrl, this.optionRequest)).json();
+	}
+	async patch(url, { searchParams, body, contentType }) {
+		this.verifyTokenWereSet();
+		this.optionRequest.method = "PATCH";
+		this.setBody(body, contentType);
+		const finalUrl = this.setParams(url, searchParams);
+		return await (await fetch(finalUrl, this.optionRequest)).json();
+	}
+	async delete(url) {
+		this.verifyTokenWereSet();
+		this.optionRequest.method = "DELETE";
+		const uri = this.baseUrl ? `${this.baseUrl}${url}` : url;
+		return await (await fetch(uri, this.optionRequest)).json();
+	}
+	setBody(body, contentType) {
+		if (contentType == "application/json") this.headers.append("Content-Type", "application/json");
+		if (body && contentType == "application/json") this.optionRequest.body = JSON.stringify(body);
+	}
+	setParams(url, { searchParams }) {
+		let partialUrl = "";
+		if (searchParams) {
+			const urlWithSearchParams = new URLSearchParams();
+			for (const [key, value] of Object.entries(searchParams)) urlWithSearchParams.append(key, value.toString());
+			partialUrl = urlWithSearchParams.toString();
+		}
+		const uri = this.baseUrl ? `${this.baseUrl}${url}` : url;
+		return partialUrl != "" ? uri.concat("?", partialUrl) : uri;
+	}
+	verifyTokenWereSet() {
+		if (this.safeTokenOn) this.token = this.safeTokenOn.storage == "localStorage" ? LocalStorage.getItem(this.safeTokenOn.keyname) : SessionStorage.getItem(this.safeTokenOn.keyname);
+		if (this.token != null && !this.headers.has("Authorization")) this.headers.append("Authorization", `Bearer ${this.token}`);
+	}
+	setToken(token, safeTokenOn) {
+		if (token) {
+			this.token = token;
+			this.headers.append("Authorization", `Bearer ${token}`);
+			if (this.safeTokenOn) this.safeTokenOn.storage == "localStorage" ? LocalStorage.setItem(this.safeTokenOn.keyname, token) : SessionStorage.setItem(this.safeTokenOn.keyname, token);
+			if (safeTokenOn) {
+				this.safeTokenOn = safeTokenOn;
+				this.safeTokenOn.storage == "localStorage" ? LocalStorage.setItem(this.safeTokenOn.keyname, token) : SessionStorage.setItem(this.safeTokenOn.keyname, token);
+			}
+		}
+	}
+	removeToken() {
+		this.token = "";
+		this.headers.delete("Authorization");
+		if (this.safeTokenOn) this.safeTokenOn.storage == "localStorage" ? LocalStorage.removeItem(this.safeTokenOn.keyname) : SessionStorage.removeItem(this.safeTokenOn.keyname);
+	}
+};
+var LocalStorage = class {
+	static getItem(key) {
+		return localStorage.getItem(key);
+	}
+	static setItem(key, value) {
+		localStorage.setItem(key, value);
+	}
+	static removeItem(key) {
+		localStorage.removeItem(key);
+	}
+};
+var SessionStorage = class {
+	static getItem(key) {
+		return sessionStorage.getItem(key);
+	}
+	static setItem(key, value) {
+		sessionStorage.setItem(key, value);
+	}
+	static removeItem(key) {
+		sessionStorage.removeItem(key);
+	}
+};
+//#endregion
+export { CustomFetchAPI, makeApiRequest };

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@bryanochoa/custom-fetch-api",
   "type": "module",
-  "version": "1.0.3",
+  "version": "2.0.1",
   "description": "fetch API personalizado",
   "author": "Bryan Ochoa <bryanjm96@gmail.com>",
   "license": "MIT",
   "homepage": "https://github.com/bryanmsombra27/custom-fetch-api#readme",
+  "keywords": [
+    "fetch",
+    "api",
+    "node"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/bryanmsombra27/custom-fetch-api.git"