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: [ { @@ -93,10 +105,40 @@ module.exports = { href: "/docs/cancellation", text: "Cancelación", }, + { + 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: "Cuerpos de solicitud codificados como URL", + text: "🆕 Contenido tipo URL-Encoding", + }, + { + type: "link", + href: "/docs/multipart", + text: "🆕 Contenido tipo Multipart", }, { type: "heading", @@ -129,7 +171,7 @@ module.exports = { { type: "link", href: "/docs/translating", - text: "Traducir estos documentos", + text: "Traduciendo esta documentación", }, ], }; diff --git a/posts/es/api_intro.md b/posts/es/api_intro.md index c52ead16..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`. @@ -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]) diff --git a/posts/es/cancellation.md b/posts/es/cancellation.md index 17523146..be47b9d0 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: 'handling_errors' +next_title: 'Contenido tipo URL-Encoding' +next_link: '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 ``` diff --git a/posts/es/config_defaults.md b/posts/es/config_defaults.md index 3c473ee4..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 @@ -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 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 198ed381..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? @@ -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 diff --git a/posts/es/multipart.md b/posts/es/multipart.md new file mode 100644 index 00000000..a8db0dde --- /dev/null +++ b/posts/es/multipart.md @@ -0,0 +1,168 @@ +--- +title: 'Contenido tipo Multipart' +prev_title: 'Contenido tipo URL-Encoding' +prev_link: 'urlencoded' +next_title: 'Notas' +next_link: '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[]`; diff --git a/posts/es/notes.md b/posts/es/notes.md index 4a0aaa10..59ba2da2 100644 --- a/posts/es/notes.md +++ b/posts/es/notes.md @@ -1,8 +1,8 @@ --- title: "Notas" -description: "Un par mas de notas de clarificación" -prev_title: "Cuerpos de solicitud codificados como URL" -prev_link: "/es/docs/urlencoded" +description: "Un par más de notas de clarificatorias" +prev_title: "Contenido tipo URL-Encoding" +prev_link: "urlencoded" --- ## Semver diff --git a/posts/es/post_example.md b/posts/es/post_example.md index 86e0fad2..89be08a9 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: 'example' next_title: 'Axios API' -next_link: '/es/docs/api_intro' +next_link: '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' + } +}) +``` 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 1ebccd6e..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. @@ -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 diff --git a/posts/es/urlencoded.md b/posts/es/urlencoded.md index 94722040..c51572ee 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' +prev_link: 'cancellation' +next_title: 'Contenido tipo 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. @@ -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); +```