Ser un buen desarrollador web no solo tiene que ver con que tu proyecto funcione. Aunque este es el primer paso, desarrollar también requiere eficiencia. Por ello, te recomendamos evitar repetir líneas de código a lo largo de tus proyectos. En este post, te enseñaremos cómo finalizar la sentencia try catch en JavaScript para tener un código más eficiente.
¿Qué es la sentencia try catch?
Antes de enseñarte cómo finalizar la sentencia try catch en JavaScript, queremos asegurarnos de que tienes claro este concepto. Esta sentencia es una lógica compuesta de las palabras clave try y catch que nos permite controlar errores con funciones async y await.
En este sentido, la sentencia try catch cumple el mismo rol que el método catch cuando estamos trabajando con promesas. Bajo este contexto, la palabra clave await que acompaña las funciones con async cumple el rol del método then: definir qué sucede en caso de éxito. Puedes conocer más sobre esta relación entre sintáxis en nuestros artículos sobre diferencia entre promesas y async y await y transformar promesas con async y await.
Para entender esta sentencia en profundidad, te recomendamos leer el artículo try…catch en la página oficial de Mozilla Developer Network.
Ahora, al igual que el método finally en JavaScript nos permite darle el mismo final a una promesa sin importar si se resuelve (manejado con los métodos resolve y then) o se rechaza (manejado con los métodos reject y catch), existe una manera de finalizar la sentencia try catch en JavaScript.
¿Cómo finalizar la sentencia try catch en JavaScript?
Finalizar la sentencia try catch en JavaScript es muy sencillo, pues basta con añadir una nueva sección de código a esta sentencia con la palabra clave finally. Dentro de esta sección, insertaremos las líneas de código que queremos que finalicen nuestro proceso asíncrono, tanto en el caso de éxito como en el caso de error.
Un ejemplo
Ahora que sabes cómo finalizar la sentencia try catch en JavaScript, te pondremos un posible caso de uso. Supongamos que tenemos un proyecto en el que necesitamos que se pinten unos datos que provienen de una API. Este es el caso de la mayoría de proyectos web, pero en nuestro caso llamaremos a estos datos tweets. Entonces, tenemos una sentencia try catch como la siguiente dentro de nuestro controlador:
try {
tweets = await TweetService.getTweets ( );
for (const tweet of tweets) {
const tweetArticleElement = document.createElement ('article');
const tweetTemplate = buildTweetView (tweet);
tweetArticleElement.innerHTML = tweetTemplate;
tweetListElement.appendChild (tweetArticleElement);
}
const loader = tweetListElement.querySelector ('.loader');
loader.remove ( );
} catch (error) {
alert ('error obteniendo tweets');
}
}Aunque para entender cómo finalizar la sentencia try catch en JavaScript el código dentro de try y catch no es relevante, el contexto de este controlador se encuentra en nuestros posts sobre identificar el patrón modelo vista controlador e implementar el patrón modelo vista controlador.
En las líneas de código anteriores, hemos definido un código a ejecutar y testar. Este código, si no tiene ningún error, tiene un elemento loader que se elimina. Ahora, queremos hacer que este loader también exista cuando hay un error. Es decir, queremos ejecutar una misma acción en caso de éxito y en caso de error.
Aunque podríamos simplemente copiar las líneas en negrilla en nuestro código catch, esto sería repetir código. Desde KeepCoding te recomendamos muchísimo no repetir código, pues es perder la eficiencia de tu proyecto. Entonces, lo que haremos será finalizar la sentencia try catch con la palabra clave finally.
No olvides eliminar las líneas de código que pondrás en esta sección de las anteriores, pues no solo estarías repitiendo código, sino que también estarías ejecutando la misma acción dos veces seguidas.
A continuación, te mostramos cómo se verían nuestras líneas a partir del catch:
} catch (error) {
alert ('error obteniendo tweets');
} finally {
const loader = tweetListElement.querySelector (".loader");
loader.remove ( );
}
}Ahora que sabes qué es y cómo puedes finalizar la sentencia try catch en JavaScript, ¡es momento de probar este conocimiento en tus propias líneas de código! Por ello, te invitamos a seguir formándote con nosotros en el Desarrollo Web Full Stack Bootcamp, un curso intensivo donde aprenderás a escribir tus propios proyectos con JavaScript, HTML, CSS y otras herramientas para el desarrollo web. ¿Te animas a seguir aprendiendo? ¡Pide información y destaba en el sector IT!
