(Crear no es fácil, gracias, su apoyo es la mayor motivación para seguir adelante, si después de leerlo le es útil, deje sus huellas)

Tabla de contenido

Código síncrono y código asíncrono

infierno de devolución de llamada

Promesa: encadenamiento de llamadas

Aplicación de la cadena de promesas

funciones asíncronas y espera

funciones asíncronas y errores de espera_captura

Bucle de eventos - EventLoop

Comprensión - Bucle de eventos (EventLoop)

Bucle de eventos - Proceso de ejecución

Resumir

Macrotareas y Microtareas

Macrotareas vs Microtareas - Orden de Ejecución

Código síncrono y código asíncrono

Código de sincronización:

Código asíncrono:

Código síncrono: ejecute línea por línea , debe esperar el resultado en su lugar antes de continuar ejecutando hacia abajo

Código asincrónico: lleva mucho tiempo después de llamar , continúa ejecutándose sin bloquear el código (no es necesario esperar en el lugar), activa una función de devolución de llamada después de que se complete el futuro

infierno de devolución de llamada

Requisitos: mostrar la primera provincia, la primera ciudad y la primera región predeterminadas en el menú desplegable

Concepto: funciones de devolución de llamada anidadas en funciones de devolución de llamada , y se formará el infierno de la función de devolución de llamada si continúa el anidamiento

Desventajas: poca legibilidad, excepciones imposibles de capturar, acoplamiento serio, tirar de todo el cuerpo

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：演示回调函数地狱
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
     * 概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
     * 缺点：可读性差，异常无法获取，耦合性严重，牵一发动全身
    */
    // 1. 获取默认第一个省份的名字
    axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
      const pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // 2. 获取默认第一个城市的名字
      axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }}).then(result => {
        const cname = result.data.list[0]
        document.querySelector('.city').innerHTML = cname
        // 3. 获取默认第一个地区的名字
        axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }}).then(result => {
          console.log(result)
          const areaName = result.data.list[0]
          document.querySelector('.area').innerHTML = areaName
        })
      })
    }).catch(error => {
      console.dir(error)
    })
  </script>
</body>

Promesa: encadenamiento de llamadas

Concepto: confiar en el método then() devolverá una característica de objeto Promise recién generada y continuará conectando la siguiente tarea hasta el final

Detalles: el valor devuelto en la función de devolución de llamada then() afectará el estado final y el resultado del objeto Promise recién generado

Beneficios: A través de llamadas en cadena, se resuelve el problema de anidamiento de la función de devolución de llamada

<body>
  <script>
    /**
     * 目标：掌握Promise的链式调用
     * 需求：把省市的嵌套结构，改成链式调用的线性结构
    */
    // 1. 创建Promise对象-模拟请求省份名字
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('北京市')
      }, 2000)
    })

    // 2. 获取省份名字
    const p2 = p.then(result => {
      console.log(result)
      // 3. 创建Promise对象-模拟请求城市名字
      // return Promise对象最终状态和结果，影响到新的Promise对象
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(result + '--- 北京')
        }, 2000)
      })
    })

    // 4. 获取城市名字
    p2.then(result => {
      console.log(result)
    })

    // then()原地的结果是一个新的Promise对象
    console.log(p2 === p)
  </script>
</body>

Aplicación de la cadena de promesas

Objetivo: Usar llamadas en cadena de Promise para resolver el problema de la función de devolución de llamada.

Método: administre una tarea asincrónica en cada objeto Promise, utilícelo para devolver el objeto Promise y conéctelos en serie

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：把回调函数嵌套代码，改成Promise链式调用结构
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    */
    let pname = ''
    // 1. 得到-获取省份Promise对象
    axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
      pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // 2. 得到-获取城市Promise对象
      return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
    }).then(result => {
      const cname = result.data.list[0]
      document.querySelector('.city').innerHTML = cname
      // 3. 得到-获取地区Promise对象
      return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
    }).then(result => {
      console.log(result)
      const areaName = result.data.list[0]
      document.querySelector('.area').innerHTML = areaName
    })
  </script>
</body>

funciones asíncronas y espera

definición:

Concepto: en la función asíncrona, use la palabra clave await en lugar de la función then para esperar el valor del resultado del estado de éxito del objeto Promise

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
     * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
     * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    */
    // 1. 定义async修饰函数
    async function getData() {
      // 2. await等待Promise对象成功的结果
      const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
      const pname = pObj.data.list[0]
      const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
      const cname = cObj.data.list[0]
      const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
      const areaName = aObj.data.list[0]


      document.querySelector('.province').innerHTML = pname
      document.querySelector('.city').innerHTML = cname
      document.querySelector('.area').innerHTML = areaName
    }

    getData()
  </script>
</body>

funciones asíncronas y errores de espera_captura

usar:

gramática:

Bucle de eventos - EventLoop

Comprensión - Bucle de eventos (EventLoop)

concepto:

Motivo: JavaScript es de subproceso único (solo se puede ejecutar una línea de código en un momento determinado). Para evitar que el código que consume mucho tiempo bloquee la ejecución de otros códigos, se diseñó un modelo de bucle de eventos.

Bucle de eventos - Proceso de ejecución

Definición: el modelo de ejecución de código y recopilación de tareas asincrónicas. Cuando la pila de llamadas está inactiva, el mecanismo de ejecución de llamar repetidamente a la función de devolución de llamada en la cola de tareas se denomina bucle de eventos.

Resumir

1. ¿Qué es el bucle de eventos?

         Ejecute código y recopile tareas asincrónicas, y llame repetidamente al mecanismo de ejecución de la función de devolución de llamada en la cola de tareas cuando la pila de llamadas esté inactiva

2. ¿Por qué hay un ciclo de eventos?

        JavaScript es de subproceso único. Para no bloquear el motor JS , diseñe un modelo para ejecutar código

3. ¿Cómo ejecutar código en JavaScript?

        Ejecute código síncrono y entregue el código asíncrono al entorno del navegador del host para su ejecución.

        Después de obtener el resultado de forma asíncrona, coloque la función de devolución de llamada en la cola de tareas

        Cuando la pila de llamadas esté libre , llame repetidamente a la función de devolución de llamada en la cola de tareas

Macrotareas y Microtareas

Después de ES6, se introdujo el objeto Promise, para que el motor JS también pueda iniciar tareas asincrónicas.

Las tareas asíncronas se dividen en:

Macrotarea : código asíncrono ejecutado por el entorno del navegador

Microtareas : código asíncrono ejecutado por el entorno del motor JS

La promesa en sí misma es síncrona, mientras que las funciones de devolución de llamada luego y catch son asíncronas.

AJAX-día03-AJAX avanzado

Código síncrono y código asíncrono

infierno de devolución de llamada

Promesa: encadenamiento de llamadas

Aplicación de la cadena de promesas

funciones asíncronas y espera

funciones asíncronas y errores de espera_captura

Bucle de eventos - EventLoop

Comprensión - Bucle de eventos (EventLoop)

Bucle de eventos - Proceso de ejecución

Resumir

Macrotareas y Microtareas

Macrotareas vs Microtareas - Orden de Ejecución

Supongo que te gusta