|
1 | 1 | --- |
2 | | -title: 'Cancelación' |
3 | | -prev_title: 'Manejando Errores' |
4 | | -prev_link: '/es/docs/handling_errors' |
5 | | -next_title: 'Cuerpos de solicitud codificados como URL' |
6 | | -next_link: '/es/docs/urlencoded' |
| 2 | +title: "Cancelación" |
| 3 | +prev_title: "Manejando Errores" |
| 4 | +prev_link: "/es/docs/handling_errors" |
| 5 | +next_title: "Cuerpos de solicitud codificados como URL" |
| 6 | +next_link: "/es/docs/urlencoded" |
7 | 7 | --- |
8 | 8 |
|
9 | | -Puedes cancelar una petición usando un *token de cancelación*. |
| 9 | +## AbortController |
10 | 10 |
|
11 | | -> El API del token de cancelación de axios esta basado en el retiro de [propuesta de promesas cancelables](https://github.com/tc39/proposal-cancelable-promises). |
| 11 | +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: |
| 12 | + |
| 13 | +```js |
| 14 | +const controller = new AbortController(); |
| 15 | + |
| 16 | +axios |
| 17 | + .get("/foo/bar", { |
| 18 | + signal: controller.signal, |
| 19 | + }) |
| 20 | + .then(function (response) { |
| 21 | + //... |
| 22 | + }); |
| 23 | +// cancelar la peticion |
| 24 | +controller.abort(); |
| 25 | +``` |
| 26 | + |
| 27 | +## CancelToken `obsoleto` |
| 28 | + |
| 29 | +También puedes cancelar una petición usando un _CancelToken_. |
| 30 | + |
| 31 | +> La API token de cancelación está basado en la propuesta [propuesta para cancelar promesas](https://github.com/tc39/proposal-cancelable-promises). |
| 32 | +
|
| 33 | +> Esta API es obsoleto desde `v0.22.0` y no debería ser usada en proyectos nuevos |
12 | 34 |
|
13 | 35 | Puedes crear un token de cancelación usando el factory `CancelToken.source` a como se muestra a continuación: |
14 | 36 |
|
15 | 37 | ```js |
16 | 38 | const CancelToken = axios.CancelToken; |
17 | 39 | const source = CancelToken.source(); |
18 | 40 |
|
19 | | -axios.get('/user/12345', { |
20 | | - cancelToken: source.token |
21 | | -}).catch(function (thrown) { |
22 | | - if (axios.isCancel(thrown)) { |
23 | | - console.log('Request canceled', thrown.message); |
24 | | - } else { |
25 | | - // manejar error |
26 | | - } |
27 | | -}); |
| 41 | +axios |
| 42 | + .get("/user/12345", { |
| 43 | + cancelToken: source.token, |
| 44 | + }) |
| 45 | + .catch(function (thrown) { |
| 46 | + if (axios.isCancel(thrown)) { |
| 47 | + console.log("Peticion Cancelada", thrown.message); |
| 48 | + } else { |
| 49 | + // Manejar error |
| 50 | + } |
| 51 | + }); |
28 | 52 |
|
29 | | -axios.post('/user/12345', { |
30 | | - name: 'new name' |
31 | | -}, { |
32 | | - cancelToken: source.token |
33 | | -}) |
| 53 | +axios.post( |
| 54 | + "/user/12345", |
| 55 | + { |
| 56 | + name: "new name", |
| 57 | + }, |
| 58 | + { |
| 59 | + cancelToken: source.token, |
| 60 | + } |
| 61 | +); |
34 | 62 |
|
35 | | -// cancelar la petición (el parametro mensaje es opcional) |
36 | | -source.cancel('Operation canceled by the user.'); |
| 63 | +// cancelar la petición (el parámetro mensaje es opcional) |
| 64 | +source.cancel("Operation canceled by the user."); |
37 | 65 | ``` |
38 | 66 |
|
39 | | -También puedes crear un token de cancelación pasando una función ejecutora al constructor `CancelToken`: |
| 67 | +También puedes crear un token de cancelación pasando una función ejecutora al constructor del `CancelToken`: |
40 | 68 |
|
41 | 69 | ```js |
42 | 70 | const CancelToken = axios.CancelToken; |
43 | 71 | let cancel; |
44 | 72 |
|
45 | | -axios.get('/user/12345', { |
| 73 | +axios.get("/user/12345", { |
46 | 74 | cancelToken: new CancelToken(function executor(c) { |
47 | 75 | // Una función ejecutora recibe una función de cancelación como parámetro |
48 | 76 | cancel = c; |
49 | | - }) |
| 77 | + }), |
50 | 78 | }); |
51 | 79 |
|
52 | 80 | // cancelar la petición |
53 | 81 | cancel(); |
54 | 82 | ``` |
55 | 83 |
|
56 | | -> Nota: puedes cancelar varias peticiones con el mismo token de cancelación. |
| 84 | +> Nota: puedes cancelar muchas peticiones con el mismo token / signal. |
| 85 | +
|
| 86 | +Durante el periodo de transición, puedes usar ambas APIs de cancelación, aun para la misma petición: |
| 87 | + |
| 88 | +```js |
| 89 | +const controller = new AbortController(); |
| 90 | + |
| 91 | +const CancelToken = axios.CancelToken; |
| 92 | +const source = CancelToken.source(); |
| 93 | + |
| 94 | +axios |
| 95 | + .get("/user/12345", { |
| 96 | + cancelToken: source.token, |
| 97 | + signal: controller.signal, |
| 98 | + }) |
| 99 | + .catch(function (thrown) { |
| 100 | + if (axios.isCancel(thrown)) { |
| 101 | + console.log("Request canceled", thrown.message); |
| 102 | + } else { |
| 103 | + // manejar error |
| 104 | + } |
| 105 | + }); |
| 106 | + |
| 107 | +axios.post( |
| 108 | + "/user/12345", |
| 109 | + { |
| 110 | + name: "new name", |
| 111 | + }, |
| 112 | + { |
| 113 | + cancelToken: source.token, |
| 114 | + } |
| 115 | +); |
| 116 | + |
| 117 | +// cancelar la petición (el parámetro mensaje es opcional) |
| 118 | +source.cancel("Operation canceled by the user."); |
| 119 | +// O |
| 120 | +controller.abort(); // el parámetro mensaje no es soportado |
| 121 | +``` |
0 commit comments