Bienvenido al tercer artículo de la serie React Vernacular Movement. Hoy profundizaremos en las operaciones asincrónicas en JavaScript e introduciremos dos palabras clave importantes: Async y Await. En este artículo, demostraremos mediante ejemplos el concepto de operaciones asincrónicas y cómo utilizar Promise, Fetch, Async y Await para manejar código asincrónico de manera más eficiente.
Prefacio
En el desarrollo web moderno, las operaciones asincrónicas son cada vez más importantes. Este artículo comenzará con los conceptos básicos, explorará en profundidad los principios de las operaciones asincrónicas y cómo utilizar la sintaxis avanzada de JavaScript para manejar situaciones asincrónicas.
Este artículo explicará JavaScript asincrónico.
- asincrónico
- Promesa y recuperación
- Asíncrono y espera
- Construir un objeto de promesa
Asincrónico
Asincrónico es un concepto indispensable en el desarrollo. El código del programa anterior es actualmente un concepto sincrónico, lo que significa que el programa se ejecutará en secuencia.
Sin embargo, en el proceso de desarrollo de una página web, a veces es necesario realizar acciones asincrónicas (asincrónicas). Por ejemplo, cuando un usuario presiona un formulario para enviar, debe esperar a que se envíen los datos y obtener los datos devueltos. el servidor antes de que puedan saber si tuvo éxito.
Si ejecuta directamente el éxito o el fracaso de la pantalla a través de JavaScript antes de que el servidor devuelva el resultado, será incorrecto.
También hay algunas sintaxis en JavaScript moderno que se ocupan específicamente de la ejecución asincrónica, incluidas Promise y Async & Await, que se presentan a continuación.
Promesa y recuperación
Promesa
Una solicitud asincrónica generalmente tiene dos resultados, éxito y fracaso, pero en realidad hay tres estados: Cumplido, Rechazado y Pendiente. A través del objeto Promise podemos conocer el estado actual de una solicitud asincrónica.
Buscar
Antes de que existiera la función de recuperación, era bastante problemático obtener datos de API y es posible que fuera necesario escribir más de veinte líneas de código. Sin embargo, para hacerlo más conveniente, ECMA agregó una nueva sintaxis de recuperación, que solo requiere. Se pueden completar una o dos líneas de datos "Obtener API".
Usemos una instancia de API directamente como ejemplo. Aquí hay una API gratuita que se encuentra en Internet.
https://api.thecatapi.com/v1/images/search
Si los lectores ingresan directamente en el navegador, pueden ver un objeto devuelto, que contiene identificación, URL, ancho y alto.
Entonces, ¿cómo utilizar el código del programa para obtener datos API?
fetch("https://api.thecatapi.com/v1/images/search") .luego(res=>res.json) .luego(console.log) .catch(console.error)
Aquí, solo necesita usar la función de recuperación y pasar la URL como argumento. Luego, puede ejecutar el programa que desea ejecutar secuencialmente a través de la función then o catch.
Tomando el código anterior como ejemplo, primero se llama a una API, el resultado devuelto se obtiene a través de la primera función luego y el mensaje se imprime a través de la segunda función luego. Finalmente, a través de la función catch, si falla, se imprimirá un mensaje de error.
Asíncrono y espera
JavaScript asíncrono
Otra sintaxis asincrónica más común y ampliamente utilizada es utilizar la función asincrónica Async & Await (función Async). En comparación con Promise & Fetch, la sintaxis de Async & Await es más simple y fácil de entender, y está más en línea con nuestros hábitos de lectura. .
Si la recuperación anterior se reescribe en sintaxis asíncrona y en espera
const getCatData = async() => { let res = await fetch("https://api.thecatapi.com/v1/images/search") let {resultados} = await res.json() console.log(resultados) } getCatData() /* [ { id: "ac5", url: "https://cdn2.thecatapi.com/images/ac5.jpg", ancho: 565, alto: 551 } ] */
Utilice la palabra clave async en la primera línea de la función para decirle a la computadora que se trata de una función asincrónica. Luego, simplemente agregue la palabra clave await delante de cualquier solicitud asincrónica que deba esperarse para completar la función asincrónica. Entonces, ¿cómo recibimos el mensaje de error? Siempre que agreguemos la sintaxis try & catch a async & await, primero podemos ejecutar el programa try y manejar el estado de falla de la Promesa en catch.
const getCatData = async() => { intentar { let res = esperar fetch("https://api.thecatapi.com/v1/images/search") let {resultados} = esperar res.json() console.log( resultados) } catch (error) { console.log(error) } } getCatData()
Construir un objeto de promesa
Como se mencionó anteriormente, Promise tiene un total de tres estados, a saber, Cumplido, Rechazado y Pendiente. Sin embargo, en términos de resultados, en última instancia se pueden resumir en dos resultados: éxito y fracaso. Por lo tanto, al ejecutar una función asincrónica, también puede devolver el resultado de la ejecución y usar el objeto Promise para almacenarlo.
const getCatData = () => new Promise((resuelve, rechaza) => { const api = "https://api.thecatapi.com/v1/images/search" const request = new XMLHttpRequest; request.open("GET ", api); request.onload = () => { request.status === 200 ? resuelve(JSON.parse(request.response).results): rechaza(Error(request.statusText)) } request.onerror = errar => rechaza(err); request.send() })
Conclusión
Este artículo explica el concepto de asincrónico (asincrónico) y algunas implementaciones. Sin embargo, el concepto asincrónico en sí es relativamente difícil y parte de la sintaxis es un poco complicada. Los lectores también pueden marcar este artículo como favorito y volver a consultarlo en el futuro. Revise y revise este contenido. Si tiene alguna sugerencia o pregunta, ¡deje un mensaje! Si le gusta esta serie de artículos, no dude en hacer clic en Me gusta y compartir para que más personas puedan verla ~
Otras referencias de artículos de React
Reaccionar movimiento vernáculo 01-JavaScript ES6
Reaccionar movimiento vernáculo 02-Objeto JavaScript ES6
¿Entiendes realmente Monorepo? 5 minutos para presentarle la arquitectura front-end a gran escala
Español 
繁體中文 
English 
简体中文 
한국어 
日本語