From 5dc55a52dd31792a5cad8d12883c318133cc6161 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Sun, 7 Jul 2024 20:29:15 -0600 Subject: [PATCH 01/13] [Fixed] text of menu --- es.lang.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/es.lang.js b/es.lang.js index ccb80511..75bb8aa8 100644 --- a/es.lang.js +++ b/es.lang.js @@ -129,7 +129,7 @@ module.exports = { { type: "link", href: "/docs/translating", - text: "Traducir estos documentos", + text: "Traduciendo esta documentación", }, ], }; From 513c94c31da05a255501205c6047a6f95b5a01fe Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Tue, 9 Jul 2024 14:06:51 -0600 Subject: [PATCH 02/13] [Updated] links and content of sidebar --- es.lang.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 52 insertions(+), 5 deletions(-) diff --git a/es.lang.js b/es.lang.js index 75bb8aa8..fd32ec0b 100644 --- a/es.lang.js +++ b/es.lang.js @@ -14,20 +14,32 @@ module.exports = { subhead: `Axios es un cliente HTTP simple basado en promesas para el navegador y node.js. Axios provee una librería fácil de usar en un paquete pequeño con una interfaz muy extensible.`, + sponsors: `

Gracias por considerar ayudar nuestro proyecto.

+

Serás automáticamente agregado a esta lista en 24 horas si el plan seleccionado provee este beneficio.

` + }, // `t` stands fot `translation`. This will contain translations of single words or phrases t: { "Get Started": "Empezando", "View on GitHub": "Ver en GitHub", - Languages: "Idiomas", + "Languages": "Idiomas", "Open Source": "Código Abierto", - Contribute: "Contribuir", + "Contribute": "Contribuir", "Source on GitHub": "Código en GitHub", + "Issues": "Problemas", + "Pull Requests": "Pull Requests", + "Code of conduct": "Código de Conducta", "Fork on GitHub": "Bifurcar en GitHub", "Fork the Website": "Bifurcar el Sitio Web", "Create an Issue": "Crear un reporte", - Next: "Siguiente", - Previous: "Anterior", + "Next": "Siguiente", + "Previous": "Anterior", + "Website Copy Right Footer": "Website Copy Right Footer", + "Axios Project Copy Right Footer": "Axios Project Copy Right Footer", + "License Label Footer": "License Label Footer", + "Sponsors": "Patrocinadores", + "Become a sponsor": "Convertirse en patrocinador" + }, sidebar: [ { @@ -96,7 +108,42 @@ module.exports = { { type: "link", href: "/docs/urlencoded", - text: "Cuerpos de solicitud codificados como URL", + text: "🆕 Datos codificados como URL", + }, + { + type: "link", + href: "/docs/res_schema", + text: "Esquema de Respuesta", + }, + { + type: "link", + href: "/docs/config_defaults", + text: "Configuraciones por Defecto", + }, + { + type: "link", + href: "/docs/interceptors", + text: "Interceptores", + }, + { + type: "link", + href: "/docs/handling_errors", + text: "Manejando Errores", + }, + { + type: "link", + href: "/docs/cancellation", + text: "Cancelación", + }, + { + type: "link", + href: "/docs/urlencoded", + text: "🆕 Contenido tipo URL-Encoding", + }, + { + type: "link", + href: "/docs/multipart", + text: "🆕 Contenido tipo Multipart", }, { type: "heading", From b9c7193ebdeb3ee29631d1b92f4fc8905296c18e Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Tue, 9 Jul 2024 14:28:05 -0600 Subject: [PATCH 03/13] [Updated] api_intro page --- posts/es/api_intro.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/posts/es/api_intro.md b/posts/es/api_intro.md index c52ead16..f60104bd 100644 --- a/posts/es/api_intro.md +++ b/posts/es/api_intro.md @@ -42,9 +42,9 @@ axios({ axios('/user/12345'); ``` -### Alias de metodos de petición +### Alias de métodos de petición -Por conveniencia los alias han sido proveídos para todos los métodos de petición. +Por conveniencia los alias han sido proveídos para todos los métodos de petición soportados. ##### axios.request(config) ##### axios.get(url[, config]) From 78b044b00a9baa13c122ed0a0340da449aae22fb Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Tue, 9 Jul 2024 18:52:07 -0600 Subject: [PATCH 04/13] [Deleted] duplicated item --- es.lang.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/es.lang.js b/es.lang.js index fd32ec0b..cf04b361 100644 --- a/es.lang.js +++ b/es.lang.js @@ -105,11 +105,6 @@ module.exports = { href: "/docs/cancellation", text: "Cancelación", }, - { - type: "link", - href: "/docs/urlencoded", - text: "🆕 Datos codificados como URL", - }, { type: "link", href: "/docs/res_schema", From fa090a9ce6e19e65b2409fb553f85b5dec8bf41d Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Wed, 10 Jul 2024 14:05:01 -0600 Subject: [PATCH 05/13] [Updated] cancellation page --- posts/es/cancellation.md | 169 ++++++++++++++++++++++----------------- 1 file changed, 96 insertions(+), 73 deletions(-) diff --git a/posts/es/cancellation.md b/posts/es/cancellation.md index 17523146..56d138f4 100644 --- a/posts/es/cancellation.md +++ b/posts/es/cancellation.md @@ -1,36 +1,71 @@ --- -title: "Cancelación" -prev_title: "Manejando Errores" -prev_link: "/es/docs/handling_errors" -next_title: "Cuerpos de solicitud codificados como URL" -next_link: "/es/docs/urlencoded" +title: 'Cancelación' +prev_title: 'Manejando Errores' +prev_link: '/es/docs/handling_errors' +next_title: 'Contenido tipo URL-Encoding' +next_link: '/es/docs/urlencoded' --- -## AbortController +## Cancelando solicitudes -Empezando desde `v0.22.0` Axios soporta el [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) para cancelar peticiones de la misma forma que la API de fetch: +Al configurar la propiedad `timeout` de una llamada axios, se manipularán los timeouts de su **respuesta**. + +En algunos casos (e.g. las conexiones a la red dejan de estar disponibles) una llamada axios se beneficiaría de la cancelación temprana de dicha **conexión**. Sin la cancelación, la llamada axios se puede colgar hasta que el código o pila padre se terminen (pueden ser unos cuantos minutos en aplicaciones servidor). + +Para terminar una llamada axios puedes usar los siguientes métodos: +- `signal` +- `cancelToken` (obsoleto) + +La combinación de `timeout` y un método de cancelación (e.g. `signal`) deberían cubrir los timeouts relacionados a la **respuesta** Y a la **conexión**. + +### `signal`: AbortController + +Comenzando desde `v0.22.0` Axios soporta el [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) para cancelar solicitudes de la forma de la API fetch: ```js const controller = new AbortController(); -axios - .get("/foo/bar", { - signal: controller.signal, - }) - .then(function (response) { - //... - }); -// cancelar la peticion -controller.abort(); +axios.get('/foo/bar', { + signal: controller.signal +}).then(function(response) { + //... +}); +// cancelar la solicitud +controller.abort() ``` -## CancelToken `obsoleto` +Ejemplo con timeout usando la última [`AbortSignal.timeout()`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout) API [nodejs 17.3+]: +```js +axios.get('/foo/bar', { + signal: AbortSignal.timeout(5000) // Aborta la solicitud después de 5 segundos +}).then(function(response) { + //... +}); +``` -También puedes cancelar una petición usando un _CancelToken_. +Ejemplo con una función auxiliar de timeout: +```js +function newAbortSignal(timeoutMs) { + const abortController = new AbortController(); + setTimeout(() => abortController.abort(), timeoutMs || 0); -> La API token de cancelación está basado en la propuesta [propuesta para cancelar promesas](https://github.com/tc39/proposal-cancelable-promises). + return abortController.signal; +} -> Esta API es obsoleto desde `v0.22.0` y no debería ser usada en proyectos nuevos +axios.get('/foo/bar', { + signal: newAbortSignal(5000) //Aborta la solicitud después de 5 segundos +}).then(function(response) { + //... +}); +``` + +### CancelToken `obsoleto` + +También puedes cancelar una solicitud usando un *CancelToken*. + +> La API de token de cancelación de axios está basada en el documento [propuesta de promesas cancelables](https://github.com/tc39/proposal-cancelable-promises) retirado. + +> Esta API está obsoleta desde `v0.22.0` y no debe ser usada en proyectos nuevos. Puedes crear un token de cancelación usando el factory `CancelToken.source` a como se muestra a continuación: @@ -38,52 +73,46 @@ Puedes crear un token de cancelación usando el factory `CancelToken.source` a c const CancelToken = axios.CancelToken; const source = CancelToken.source(); -axios - .get("/user/12345", { - cancelToken: source.token, - }) - .catch(function (thrown) { - if (axios.isCancel(thrown)) { - console.log("Peticion Cancelada", thrown.message); - } else { - // Manejar error - } - }); - -axios.post( - "/user/12345", - { - name: "new name", - }, - { - cancelToken: source.token, +axios.get('/user/12345', { + cancelToken: source.token +}).catch(function (thrown) { + if (axios.isCancel(thrown)) { + console.log('Request canceled', thrown.message); + } else { + // manejar error } -); +}); -// cancelar la petición (el parámetro mensaje es opcional) -source.cancel("Operation canceled by the user."); +axios.post('/user/12345', { + name: 'new name' +}, { + cancelToken: source.token +}) + +// cancelar la solicitud (el parámetro mensaje es opcional) +source.cancel('Operation canceled by the user.'); ``` -También puedes crear un token de cancelación pasando una función ejecutora al constructor del `CancelToken`: +También puedes crear un token de cancelación pasando una función ejecutora al constructor de `CancelToken`: ```js const CancelToken = axios.CancelToken; let cancel; -axios.get("/user/12345", { +axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { - // Una función ejecutora recibe una función de cancelación como parámetro + // Una función ejecutora recibe una función cancelar como parámetro cancel = c; - }), + }) }); -// cancelar la petición +// cancelar la solicitud cancel(); ``` -> Nota: puedes cancelar muchas peticiones con el mismo token / signal. +> Nota: puedes cancelar varias solicitudes con el mismo token / signal de cancelación. -Durante el periodo de transición, puedes usar ambas APIs de cancelación, aun para la misma petición: +Durante el periodo de transición, puedes usar ambas APIs de cancelación, incluso para la misma solicitud: ```js const controller = new AbortController(); @@ -91,31 +120,25 @@ const controller = new AbortController(); const CancelToken = axios.CancelToken; const source = CancelToken.source(); -axios - .get("/user/12345", { - cancelToken: source.token, - signal: controller.signal, - }) - .catch(function (thrown) { - if (axios.isCancel(thrown)) { - console.log("Request canceled", thrown.message); - } else { - // manejar error - } - }); - -axios.post( - "/user/12345", - { - name: "new name", - }, - { - cancelToken: source.token, +axios.get('/user/12345', { + cancelToken: source.token, + signal: controller.signal +}).catch(function (thrown) { + if (axios.isCancel(thrown)) { + console.log('Request canceled', thrown.message); + } else { + // manejar error } -); +}); + +axios.post('/user/12345', { + name: 'new name' +}, { + cancelToken: source.token +}) // cancelar la petición (el parámetro mensaje es opcional) -source.cancel("Operation canceled by the user."); -// O -controller.abort(); // el parámetro mensaje no es soportado +source.cancel('Operation canceled by the user.'); +// OR +controller.abort(); // el parámetro mensaje no esta soportado ``` From a0d9e94aff69ee251e3eb0674967fb85cd498ab4 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Wed, 10 Jul 2024 14:11:13 -0600 Subject: [PATCH 06/13] [fixed] wrong translation in config page --- posts/es/config_defaults.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/posts/es/config_defaults.md b/posts/es/config_defaults.md index 3c473ee4..5b0e1c48 100644 --- a/posts/es/config_defaults.md +++ b/posts/es/config_defaults.md @@ -32,7 +32,7 @@ instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; ### Configurar orden de precedencia -La configuración será combinada en orden de precedencia. El orden es: valores predeterminados de la biblioteca que se encuentran en [lib/defaults.js](https://github.com/axios/axios/blob/master/lib/defaults.js#L28), luego la propiedad `defaults` de la instancia, y finalmente el argumento `config` de la petición. Este último tendrá prioridad sobre el primero. Aquí hay un ejemplo. +La configuración será combinada en orden de precedencia. El orden es: valores predeterminados de la librería que se encuentran en [lib/defaults.js](https://github.com/axios/axios/blob/master/lib/defaults.js#L28), luego la propiedad `defaults` de la instancia, y finalmente el argumento `config` de la petición. Este último tendrá prioridad sobre el primero. Aquí hay un ejemplo. ```js // Crear una instancia usando la configuración por defecto proveída por la librería From a83f8909d98943ff72e41a84b6740cb5b79e76f7 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Wed, 10 Jul 2024 17:28:18 -0600 Subject: [PATCH 07/13] [Updated] intro page --- posts/es/intro.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/posts/es/intro.md b/posts/es/intro.md index 198ed381..312faa93 100644 --- a/posts/es/intro.md +++ b/posts/es/intro.md @@ -16,7 +16,17 @@ Axios es un Cliente HTTP *[basado en promesas](https://javascript.info/promise-b - Intercepta petición y respuesta - Transforma petición y datos de respuesta - Cancela peticiones -- Transformacion automatica de datos JSON +- Timeouts +- Serialización de parámetros Query con soporte para entradas anidadas +- Serialización automatica del cuerpo de la solicitud a: + - JSON (`application/json`) + - Multipart / FormData (`multipart/form-data`) + - URL encoded form (`application/x-www-form-urlencoded`) +- Postea Forms HTML como un JSON +- Manipulación automática de datos JSON en la respuesta +- Captura de progreso para navegadores y node.js con información extra (tasa de velocidad, tiempo restante) +- Configura límites de banda para node.js +- Compatible con spec-compliant FormData y Blob (incluyendo `node.js`) - Soporte para proteger al cliente contra [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery) # Instalación @@ -49,4 +59,11 @@ Usando CDN unpkg: ```html +``` + +Modulos CommonJS pre construidos para importe directo con `require`(si tu empaquetador de módulos falla en resolverlos automaticamente) + +```js +const axios = require('axios/dist/browser/axios.cjs'); // browser +const axios = require('axios/dist/node/axios.cjs'); // node ``` \ No newline at end of file From 261330bb8e94222b869fc0ff2ca643ef3ec69e40 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Thu, 11 Jul 2024 12:24:02 -0600 Subject: [PATCH 08/13] [Added] multipart page --- posts/es/multipart.md | 168 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 posts/es/multipart.md diff --git a/posts/es/multipart.md b/posts/es/multipart.md new file mode 100644 index 00000000..6a24de14 --- /dev/null +++ b/posts/es/multipart.md @@ -0,0 +1,168 @@ +--- +title: 'Contenido tipo Multipart' +prev_title: 'Contenido tipo URL-Encoding' +prev_link: '/es/docs/urlencoded' +next_title: 'Notes' +next_link: '/es/docs/notes' +--- + +## Publicando datos como `multipart/form-data` + +### Usando la API FormData + +#### Navegador + +```js +const form = new FormData(); +form.append('my_field', 'my value'); +form.append('my_buffer', new Blob([1,2,3])); +form.append('my_file', fileInput.files[0]); + +axios.post('https://example.com', form) +``` + +El mismo resultado puede ser logrado usando el serializador interno de Axios y el método atajo correspondiente: + +```js +axios.postForm('https://httpbin.org/post', { + my_field: 'my value', + my_buffer: new Blob([1,2,3]), + my_file: fileInput.files // FileList sera desempaquetado como campos separados +}); +``` + +Form HTML puede ser pasado directamente como el payload de la petición + +#### Node.js + +```js +import axios from 'axios'; + +const form = new FormData(); +form.append('my_field', 'my value'); +form.append('my_buffer', new Blob(['some content'])); + +axios.post('https://example.com', form) +``` + +Dado que node.js no soporta actualmente la creación de un `Blob` desde un archivo, puedes usar un paquete de un tercero para este proposito. + +```js +import {fileFromPath} from 'formdata-node/file-from-path' + +form.append('my_field', 'my value'); +form.append('my_file', await fileFromPath('/foo/bar.jpg')); + +axios.post('https://example.com', form) +``` + +Para versiones de Axios mayores que `v1.3.0`, debes importar el paquete `form-data`. + +```js +const FormData = require('form-data'); + +const form = new FormData(); +form.append('my_field', 'my value'); +form.append('my_buffer', new Buffer(10)); +form.append('my_file', fs.createReadStream('/foo/bar.jpg')); + +axios.post('https://example.com', form) +``` + +### 🆕 Serialización Automática + +Comenzando desde la versión `v0.27.0`, Axios soporta la serialización automática de objetos a un objeto FormData si la cabecera Content-Type de la petición está en `multipart/form-data`. + +La siguiente solicitud enviará los datos como FormData (Navegador & Node.js): + +```js +import axios from 'axios'; + +axios.post('https://httpbin.org/post', { + user: { + name: 'Dmitriy' + }, + file: fs.createReadStream('/foo/bar.jpg') +}, { + headers: { + 'Content-Type': 'multipart/form-data' + } +}).then(({data})=> console.log(data)); +``` + +El serializador FormData de Axios soporta algunos casos especiales para ejecutar las siguiente operaciones: + +- `{}` - serializa el valor con JSON.stringify +- `[]` - desempaqueta el objeto array como campos separados con la misma llave o key + +> NOTA: +> La operación desempaquetar/expandir será usada por defecto en arrays y objetos FileList + +El serializador FormData soporta opciones adicionales a través de la propiedad `config.formSerializer: object` para manipular casos especiales: + +- `visitor: Function` - visitor es la función definida por el usuario que será llamada recursivamente para serializar el objeto data al objeto `FormData` siguiendo reglas personalizadas. + +- `dots: boolean = false` - usa notación de puntos en vez de corchetes para serializar arrays y objetos; + +- `metaTokens: boolean = true` - añade las terminaciones especiales (e.g `user{}: '{"name": "John"}'`) en la llave FormData. +El body-parser del back-end podría usar potencialmente esta meta-información para convertir automáticamente el valor a JSON. + +- `indexes: null|false|true = false` - controla como los índices serán agregados a las llaves (keys) desempaquetadas de array de objetos `flat` + + - `null` - no añadir corchetes (`arr: 1`, `arr: 2`, `arr: 3`) + - `false`(por defecto) - añade corchete vacios (`arr[]: 1`, `arr[]: 2`, `arr[]: 3`) + - `true` - añade corchetes con índices (`arr[0]: 1`, `arr[1]: 2`, `arr[2]: 3`) + +Digamos que tenemos un objeto como este: + +```js +const obj = { + x: 1, + arr: [1, 2, 3], + arr2: [1, [2], 3], + users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}], + 'obj2{}': [{x:1}] +}; +``` + +Los siguientes pasos serán ejecutados por el serializador de Axios internamente: + +```js +const formData= new FormData(); +formData.append('x', '1'); +formData.append('arr[]', '1'); +formData.append('arr[]', '2'); +formData.append('arr[]', '3'); +formData.append('arr2[0]', '1'); +formData.append('arr2[1][0]', '2'); +formData.append('arr2[2]', '3'); +formData.append('users[0][name]', 'Peter'); +formData.append('users[0][surname]', 'Griffin'); +formData.append('users[1][name]', 'Thomas'); +formData.append('users[1][surname]', 'Anderson'); +formData.append('obj2{}', '[{"x":1}]'); +``` + +```js +import axios from 'axios'; + +axios.post('https://httpbin.org/post', { + 'myObj{}': {x: 1, s: "foo"}, + 'files[]': document.querySelector('#fileInput').files +}, { + headers: { + 'Content-Type': 'multipart/form-data' + } +}).then(({data})=> console.log(data)); +``` + +Axios soporta los siguientes métodos de atajo: `postForm`, `putForm`, `patchForm` +los cuales solo son los métodos http correspondientes con la cabecera content-type preestablecida a `multipart/form-data`. + +Los objetos `FileList` pueden ser pasados directamente: + +```js +await axios.postForm('https://httpbin.org/post', document.querySelector('#fileInput').files) +``` + +Todos los archivos seran enviados con los mismos nombres de campo: `files[]`; From e68ccd81e27fc0457eed29408974ff1f7857cc0e Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Thu, 11 Jul 2024 14:10:47 -0600 Subject: [PATCH 09/13] [Updated] notes page --- posts/es/notes.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/posts/es/notes.md b/posts/es/notes.md index 4a0aaa10..c5e206e2 100644 --- a/posts/es/notes.md +++ b/posts/es/notes.md @@ -1,7 +1,7 @@ --- title: "Notas" -description: "Un par mas de notas de clarificación" -prev_title: "Cuerpos de solicitud codificados como URL" +description: "Un par más de notas de clarificatorias" +prev_title: "Contenido tipo URL-Encoding" prev_link: "/es/docs/urlencoded" --- From 4c31a031a96e8c7f91764d6f1a37a4bb6e963226 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Fri, 12 Jul 2024 13:53:41 -0600 Subject: [PATCH 10/13] [Updated] post example page --- posts/es/post_example.md | 65 ++++++++++++++++++++++++++++++++++------ 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/posts/es/post_example.md b/posts/es/post_example.md index 86e0fad2..50a15a23 100644 --- a/posts/es/post_example.md +++ b/posts/es/post_example.md @@ -1,13 +1,15 @@ --- -title: 'Peticion POST' -description: 'Como ejecutar una peticion POST con Axios' +title: 'Petición POST' +description: 'Como ejecutar una petición POST con Axios' prev_title: 'Ejemplo Mínimo' -prev_link: '/es/docs/example' +prev_link: 'es/docs/example' next_title: 'Axios API' -next_link: '/es/docs/api_intro' +next_link: 'es/docs/api_intro' --- -Ejecutando una peticion `POST` +## Ejecutando una petición `POST` + +### JSON ```js axios.post('/user', { @@ -22,7 +24,7 @@ axios.post('/user', { }); ``` -Ejecutando múltiples peticiones concurrentes +Ejecutando multiple peticiones concurrentes ```js function getUserAccount() { @@ -33,9 +35,54 @@ function getUserPermissions() { return axios.get('/user/12345/permissions'); } +const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]); + +// OR + Promise.all([getUserAccount(), getUserPermissions()]) - .then(function (results) { - const acct = results[0]; - const perm = results[1]; + .then(function ([acct, perm]) { + // ... }); ``` + +Postear un Form HTML como JSON + +```js +const {data} = await axios.post('/user', document.querySelector('#my-form'), { + headers: { + 'Content-Type': 'application/json' + } +}) +``` + +### Forms + +- Multipart (`multipart/form-data`) + +```js +const {data} = await axios.post('https://httpbin.org/post', { + firstName: 'Fred', + lastName: 'Flintstone', + orders: [1, 2, 3], + photo: document.querySelector('#fileInput').files + }, { + headers: { + 'Content-Type': 'multipart/form-data' + } + } +) +``` + +- URL encoded form (`application/x-www-form-urlencoded`) + +```js +const {data} = await axios.post('https://httpbin.org/post', { + firstName: 'Fred', + lastName: 'Flintstone', + orders: [1, 2, 3] + }, { + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + } +}) +``` From 48b95b2c83d32f91a7e079619618b8da7eb2455d Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Fri, 12 Jul 2024 14:21:36 -0600 Subject: [PATCH 11/13] [Updated] response schema page --- posts/es/res_schema.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/posts/es/res_schema.md b/posts/es/res_schema.md index 1ebccd6e..72f950db 100644 --- a/posts/es/res_schema.md +++ b/posts/es/res_schema.md @@ -14,6 +14,8 @@ La respuesta para una petición contiene la siguiente información. data: {}, // `status` es el código HTTP de la respuesta del servidor + // A partir de HTTP/2, el texto de estado está en blanco o no es compatible. + // (HTTP/2 RFC: https://www.rfc-editor.org/rfc/rfc7540#section-8.1.2.4) status: 200, // `statusText` es el mensaje del estado HTTP de la respuesta del servidor From b0dfab91f2730ec8f3ecac93075d519404508578 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Sun, 14 Jul 2024 15:15:45 -0600 Subject: [PATCH 12/13] [Updated] URL encoded page --- posts/es/urlencoded.md | 72 ++++++++++++++++++++++++++++-------------- 1 file changed, 49 insertions(+), 23 deletions(-) diff --git a/posts/es/urlencoded.md b/posts/es/urlencoded.md index 94722040..63010e29 100644 --- a/posts/es/urlencoded.md +++ b/posts/es/urlencoded.md @@ -1,9 +1,9 @@ --- -title: 'Cuerpos de solicitud codificados como URL' +title: 'Contenido tipo URL-Encoding' prev_title: 'Cancelación' prev_link: '/es/docs/cancellation' -next_title: 'Notas' -next_link: '/es/docs/notes' +next_title: 'Contenido tipo Multipart' +next_link: '/es/docs/multipart' --- Por defecto, axios serializa objetos JavaScript a `JSON`. Para enviar data en un formato distinto a `application/x-www-form-urlencoded`, puedes usar una de las siguientes opciones. @@ -28,7 +28,7 @@ const qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 })); ``` -O de otra manera (ES6), +O de otra forma (ES6), ```js import qs from 'qs'; @@ -63,31 +63,57 @@ axios.post('http://something.com/', params.toString()); También puedes usar la librería [`qs`](https://github.com/ljharb/qs). -###### NOTA -La librería `qs` es preferida si necesitas un stringify de objetos anidados, ya que el método `querystring` tiene problemas conocidos con ese caso de uso (https://github.com/nodejs/node-v0.x-archive/issues/1665). +> Nota: Se prefiere usar la librería `qs` si necesitas un stringify de objetos anidados, ya que el método `querystring` tiene problemas conocidos con ese caso de uso (https://github.com/nodejs/node-v0.x-archive/issues/1665). -#### Form data +### 🆕 Serialización Automática -En node.js, puedes usar la librería [`form-data`](https://github.com/form-data/form-data) de la siguiente manera: +Axios serializará automáticamente el objeto data al formato urlencoded si el contenido de la cabecera `content-type` es `application/x-www-form-urlencoded`. + +Esto funciona en el navegador y en `node.js`: ```js -const FormData = require('form-data'); - -const form = new FormData(); -form.append('my_field', 'my value'); -form.append('my_buffer', new Buffer(10)); -form.append('my_file', fs.createReadStream('/foo/bar.jpg')); - -axios.post('https://example.com', form, { headers: form.getHeaders() }) +const data = { + x: 1, + arr: [1, 2, 3], + arr2: [1, [2], 3], + users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}], +}; + +await axios.post('https://postman-echo.com/post', data, + {headers: {'content-type': 'application/x-www-form-urlencoded'}} +); ``` -Alternativamente, usa un interceptor: +El servidor lo manejara como ```js -axios.interceptors.request.use(config => { - if (config.data instanceof FormData) { - Object.assign(config.headers, config.data.getHeaders()); + { + x: '1', + 'arr[]': [ '1', '2', '3' ], + 'arr2[0]': '1', + 'arr2[1][0]': '2', + 'arr2[2]': '3', + 'arr3[]': [ '1', '2', '3' ], + 'users[0][name]': 'Peter', + 'users[0][surname]': 'griffin', + 'users[1][name]': 'Thomas', + 'users[1][surname]': 'Anderson' } - return config; -}); -``` \ No newline at end of file +```` + + Si el body parser de tu framework de server soporta la decodificación de objetos anidados (como `body-parser` de `express.js`), +recibirás automáticamente el mismo objeto server que enviaste. + +Ejemplo Echo server (`express.js`) : + +```js + var app = express(); + + app.use(bodyParser.urlencoded({ extended: true })); // support url-encoded bodies + + app.post('/', function (req, res, next) { + res.send(JSON.stringify(req.body)); + }); + + server = app.listen(3000); +``` From fb9eadb022428c61523c8d47ec946b7fc5490dc5 Mon Sep 17 00:00:00 2001 From: Kevin Lopez Date: Tue, 16 Jul 2024 13:42:44 -0600 Subject: [PATCH 13/13] [Fixed] links --- posts/es/api_intro.md | 4 ++-- posts/es/cancellation.md | 4 ++-- posts/es/config_defaults.md | 4 ++-- posts/es/example.md | 4 ++-- posts/es/handling_errors.md | 4 ++-- posts/es/instance.md | 4 ++-- posts/es/interceptors.md | 4 ++-- posts/es/intro.md | 2 +- posts/es/multipart.md | 6 +++--- posts/es/notes.md | 2 +- posts/es/post_example.md | 4 ++-- posts/es/req_config.md | 4 ++-- posts/es/res_schema.md | 4 ++-- posts/es/urlencoded.md | 4 ++-- 14 files changed, 27 insertions(+), 27 deletions(-) diff --git a/posts/es/api_intro.md b/posts/es/api_intro.md index f60104bd..2dcec029 100644 --- a/posts/es/api_intro.md +++ b/posts/es/api_intro.md @@ -2,9 +2,9 @@ title: 'API de Axios' description: 'Referencia del API de Axios' prev_title: 'Petición Post' -prev_link: '/es/docs/post_example' +prev_link: 'post_example' next_title: 'La instancia Axios' -next_link: '/es/docs/instance' +next_link: 'instance' --- Las peticiones pueden ser hechas pasando la configuración relevante a `axios`. diff --git a/posts/es/cancellation.md b/posts/es/cancellation.md index 56d138f4..be47b9d0 100644 --- a/posts/es/cancellation.md +++ b/posts/es/cancellation.md @@ -1,9 +1,9 @@ --- title: 'Cancelación' prev_title: 'Manejando Errores' -prev_link: '/es/docs/handling_errors' +prev_link: 'handling_errors' next_title: 'Contenido tipo URL-Encoding' -next_link: '/es/docs/urlencoded' +next_link: 'urlencoded' --- ## Cancelando solicitudes diff --git a/posts/es/config_defaults.md b/posts/es/config_defaults.md index 5b0e1c48..43ac4628 100644 --- a/posts/es/config_defaults.md +++ b/posts/es/config_defaults.md @@ -1,9 +1,9 @@ --- title: 'Configuraciones por Defecto' prev_title: 'Esquema de Respuesta' -prev_link: '/es/docs/res_schema' +prev_link: 'res_schema' next_title: 'Interceptores' -next_link: '/es/docs/interceptors' +next_link: 'interceptors' --- ## Configuraciones por Defecto diff --git a/posts/es/example.md b/posts/es/example.md index e457c64a..fc8ed384 100644 --- a/posts/es/example.md +++ b/posts/es/example.md @@ -2,9 +2,9 @@ title: 'Ejemplo Mínimo' description: 'Un ejemplo pequeño de como usar Axios' prev_title: 'Introducción' -prev_link: '/es/docs/intro' +prev_link: 'intro' next_title: 'Petición POST' -next_link: '/es/docs/post_example' +next_link: 'post_example' --- ## nota: Uso de CommonJS diff --git a/posts/es/handling_errors.md b/posts/es/handling_errors.md index 062ca213..aa05c42c 100644 --- a/posts/es/handling_errors.md +++ b/posts/es/handling_errors.md @@ -1,9 +1,9 @@ --- title: 'Manejando Errores' prev_title: 'Interceptores' -prev_link: '/es/docs/interceptors' +prev_link: 'interceptors' next_title: 'Cancelación' -next_link: '/es/docs/cancellation' +next_link: 'cancellation' --- ```js diff --git a/posts/es/instance.md b/posts/es/instance.md index e1eda8f2..67b676c3 100644 --- a/posts/es/instance.md +++ b/posts/es/instance.md @@ -1,9 +1,9 @@ --- title: 'La instancia Axios' prev_title: 'API de Axios' -prev_link: '/es/docs/api_intro' +prev_link: 'api_intro' next_title: 'Configuración de Petición' -next_link: '/es/docs/req_config' +next_link: 'req_config' --- ### Creando una instancia diff --git a/posts/es/interceptors.md b/posts/es/interceptors.md index d68f3ab0..eb0dee69 100644 --- a/posts/es/interceptors.md +++ b/posts/es/interceptors.md @@ -1,9 +1,9 @@ --- title: 'Interceptores' prev_title: 'Configuraciones por Defecto' -prev_link: '/es/docs/config_defaults' +prev_link: 'config_defaults' next_title: 'Manejando Errores' -next_link: '/es/docs/handling_errors' +next_link: 'handling_errors' --- Puedes interceptar peticiones o respuestas antes que sean manipulados por `then` o `catch`. diff --git a/posts/es/intro.md b/posts/es/intro.md index 312faa93..de59a8eb 100644 --- a/posts/es/intro.md +++ b/posts/es/intro.md @@ -2,7 +2,7 @@ title: 'Empezando' description: 'Cliente HTTP simple basado en promesas para el navegador y node.js' next_title: 'Ejemplo Mínimo' -next_link: '/es/docs/example' +next_link: 'example' --- # ¿Qué es Axios? diff --git a/posts/es/multipart.md b/posts/es/multipart.md index 6a24de14..a8db0dde 100644 --- a/posts/es/multipart.md +++ b/posts/es/multipart.md @@ -1,9 +1,9 @@ --- title: 'Contenido tipo Multipart' prev_title: 'Contenido tipo URL-Encoding' -prev_link: '/es/docs/urlencoded' -next_title: 'Notes' -next_link: '/es/docs/notes' +prev_link: 'urlencoded' +next_title: 'Notas' +next_link: 'notes' --- ## Publicando datos como `multipart/form-data` diff --git a/posts/es/notes.md b/posts/es/notes.md index c5e206e2..59ba2da2 100644 --- a/posts/es/notes.md +++ b/posts/es/notes.md @@ -2,7 +2,7 @@ title: "Notas" description: "Un par más de notas de clarificatorias" prev_title: "Contenido tipo URL-Encoding" -prev_link: "/es/docs/urlencoded" +prev_link: "urlencoded" --- ## Semver diff --git a/posts/es/post_example.md b/posts/es/post_example.md index 50a15a23..89be08a9 100644 --- a/posts/es/post_example.md +++ b/posts/es/post_example.md @@ -2,9 +2,9 @@ title: 'Petición POST' description: 'Como ejecutar una petición POST con Axios' prev_title: 'Ejemplo Mínimo' -prev_link: 'es/docs/example' +prev_link: 'example' next_title: 'Axios API' -next_link: 'es/docs/api_intro' +next_link: 'api_intro' --- ## Ejecutando una petición `POST` diff --git a/posts/es/req_config.md b/posts/es/req_config.md index dc23dc9e..b33b24ba 100644 --- a/posts/es/req_config.md +++ b/posts/es/req_config.md @@ -1,9 +1,9 @@ --- title: 'Configuración de Petición' prev_title: 'La Instancia Axios' -prev_link: '/es/docs/instance' +prev_link: 'instance' next_title: 'Esquema de Respuesta' -next_link: '/es/docs/res_schema' +next_link: 'res_schema' --- diff --git a/posts/es/res_schema.md b/posts/es/res_schema.md index 72f950db..a147551f 100644 --- a/posts/es/res_schema.md +++ b/posts/es/res_schema.md @@ -1,9 +1,9 @@ --- title: 'Esquema de Respuesta' prev_title: 'Configuración de Petición' -prev_link: '/es/docs/req_config' +prev_link: 'req_config' next_title: 'Configuraciones por Defecto' -next_link: '/es/docs/config_defaults' +next_link: 'config_defaults' --- La respuesta para una petición contiene la siguiente información. diff --git a/posts/es/urlencoded.md b/posts/es/urlencoded.md index 63010e29..c51572ee 100644 --- a/posts/es/urlencoded.md +++ b/posts/es/urlencoded.md @@ -1,9 +1,9 @@ --- title: 'Contenido tipo URL-Encoding' prev_title: 'Cancelación' -prev_link: '/es/docs/cancellation' +prev_link: 'cancellation' next_title: 'Contenido tipo Multipart' -next_link: '/es/docs/multipart' +next_link: 'multipart' --- Por defecto, axios serializa objetos JavaScript a `JSON`. Para enviar data en un formato distinto a `application/x-www-form-urlencoded`, puedes usar una de las siguientes opciones.