@bryanochoa/custom-fetch-api 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
### Fetch API personalizado
|
|
2
2
|
|
|
3
3
|
Este proyecto utiliza la funcionalidad nativa del FETCH API para realizar solicitudes HTTP de manera personalizada. El objetivo es proporcionar una interfaz sencilla y flexible para interactuar con APIs externas, manejando configuraciones específicas adaptando algunas de las peticiones http más comunes.
|
|
4
4
|
|
|
@@ -7,21 +7,21 @@ Cabe aclarar que este proyecto no es un reemplazo completo del FETCH API, sino u
|
|
|
7
7
|
### Instalación
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm
|
|
10
|
+
npm i @bryanochoa/custom-fetch-api
|
|
11
11
|
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
### pnpm
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
pnpm add @
|
|
17
|
+
pnpm add @bryanochoa/custom-fetch-api
|
|
18
18
|
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
### yarn
|
|
22
22
|
|
|
23
23
|
```bash
|
|
24
|
-
yarn add @
|
|
24
|
+
yarn add @bryanochoa/custom-fetch-api
|
|
25
25
|
|
|
26
26
|
```
|
|
27
27
|
|
|
@@ -43,10 +43,12 @@ const data = await makeApiRequest('https://api.example.com/data', {
|
|
|
43
43
|
key: 'value'
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
|
-
Petición PUT:
|
|
47
46
|
|
|
48
47
|
```
|
|
49
48
|
|
|
49
|
+
Petición PUT:
|
|
50
|
+
|
|
51
|
+
```
|
|
50
52
|
const data = await makeApiRequest('https://api.example.com/data', {
|
|
51
53
|
method: 'PUT',
|
|
52
54
|
body: {
|
|
@@ -54,13 +56,16 @@ key: 'value'
|
|
|
54
56
|
}
|
|
55
57
|
});
|
|
56
58
|
|
|
59
|
+
```
|
|
60
|
+
|
|
57
61
|
Si tu peticion maneja tokens de autenticación, puedes incluirlos en el objeto de configuración:
|
|
58
62
|
|
|
59
63
|
```
|
|
60
64
|
const data = await makeApiRequest('https://api.example.com/data', {
|
|
61
|
-
|
|
62
|
-
|
|
65
|
+
method: 'GET',
|
|
66
|
+
token:"Bearer your_token_here"
|
|
63
67
|
});
|
|
68
|
+
|
|
64
69
|
```
|
|
65
70
|
|
|
66
71
|
La petición incluira el token en el encabezado de autorización de la solicitud HTTP.
|
|
@@ -68,12 +73,13 @@ La petición incluira el token en el encabezado de autorización de la solicitud
|
|
|
68
73
|
También es posible agregar searchParams a la URL de la solicitud:
|
|
69
74
|
|
|
70
75
|
```
|
|
76
|
+
|
|
71
77
|
const data = await makeApiRequest('https://api.example.com/data', {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
method: 'GET',
|
|
79
|
+
searchParams: {
|
|
80
|
+
param1: 'value1',
|
|
81
|
+
param2: 'value2'
|
|
82
|
+
}
|
|
77
83
|
});
|
|
78
84
|
|
|
79
85
|
```
|
|
@@ -83,22 +89,24 @@ const data = await makeApiRequest('https://api.example.com/data', {
|
|
|
83
89
|
Al utilizar TypeScript, se puede tipar la respuesta de la solicitud HTTP para obtener un mejor control sobre los datos recibidos. Por ejemplo:
|
|
84
90
|
|
|
85
91
|
```
|
|
92
|
+
|
|
86
93
|
interface ApiResponse {
|
|
87
|
-
|
|
88
|
-
|
|
94
|
+
id: number;
|
|
95
|
+
name: string;}
|
|
89
96
|
|
|
90
|
-
Petición GET:
|
|
91
97
|
|
|
92
98
|
```
|
|
93
99
|
|
|
100
|
+
Petición GET:
|
|
101
|
+
|
|
102
|
+
```
|
|
94
103
|
const data = await makeApiRequest<ApiResponse>('https://api.example.com/data');
|
|
95
104
|
|
|
96
105
|
console.log(data.id);
|
|
97
106
|
|
|
98
107
|
```
|
|
99
|
-
Esa es una forma de asegurarse de que la respuesta de la solicitud HTTP cumpla con la estructura esperada y evitar errores en tiempo de ejecución.
|
|
100
|
-
|
|
101
108
|
|
|
109
|
+
Esa es una forma de asegurarse de que la respuesta de la solicitud HTTP cumpla con la estructura esperada y evitar errores en tiempo de ejecución.
|
|
102
110
|
|
|
103
111
|
Al utilizar searchParams, la URL final de la solicitud incluirá los parámetros de búsqueda especificados: 'https://api.example.com/data?param1=value1¶m2=value2'. Cabe aclarar que si se desea agregar searchParams a la URL, se debe pasar un objeto con las propiedades y valores correspondientes.
|
|
104
112
|
|
|
@@ -107,4 +115,3 @@ Por ultimo, se puede cambiar el content-type de la solicitud HTTP, por defecto s
|
|
|
107
115
|
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.
|
|
108
116
|
|
|
109
117
|
El proyecto se encuentra en constante desarrollo y se espera que se agreguen más funcionalidades y mejoras en el futuro.
|
|
110
|
-
```
|