Objeto de promesa

conocimiento previo

objetos de función y objetos de instancia

Cómo distinguir la función de la fórmula del objeto: el lado izquierdo de los paréntesis es la función y el lado izquierdo del punto es el objeto

El lado izquierdo del punto es el objeto, donde el objeto se divide en: objeto de función, objeto de instancia

// 函数对象 Person
function Person () {
      
      }

// 实例对象 person
const person = new Person()

Dos funciones de devolución de llamada

Las funciones de devolución de llamada se dividen en dos tipos: funciones de devolución de llamada síncronas y funciones de devolución de llamada asíncronas

Función de devolución de llamada síncrona:

ejecutar inmediatamente
no estará en cola

Tales como: la función de devolución de llamada en la función forEach

const arr = [1, 2, 3]
arr.forEach(item => {
        
         // 同步回调：立即执行
  console.log(item)
})
console.log('forEach执行完毕后执行输出')

función de devolución de llamada asíncrona

no se ejecuta inmediatamente
poner en la cola primero

Tales como: temporizador, solicitud ajax

setTimeout(() => {
        
        
  console.log('setTimeout') // 异步回调：先放入队列，等待执行
}, 0)
console.log('在定时间结束之前执行')

Errores incorporados comunes

ReferenceError: error de referencia

console.log(a) // ReferenceError: a is not defined

TypeError: tipo de error

const a = null
console.log(a.xxx) // TypeError: Cannot read property 'xxx' for undefined

RangeError: error de rango (el valor de los datos no está dentro de su rango permitido)

function fun () {
      
      
	fun()
}
fun() // RangeError: Maximum call stack size exceeded

SyntaxError: error de sintaxis

const text = """" // SyntaxError：Unexpected string

Manejo de errores: atrapar y lanzar

Detectar errores: intentar... atrapar

Lanzar un error: lanzar

// 抛出异常
function fun () {
      
      
  if (new Date.now()%2 == 1) {
      
      
    console.log('ok')
  } else {
      
      
    // 抛出异常
    throw new Error('not')
  }
}

// 捕获抛出的异常
try {
      
      
  fun ()
} catch (err) {
      
      
  alert(err.message) // 弹出框信息为not
}

Promesa

que es promesa

Una característica muy importante y útil en ES6: Promise
Promise es una nueva solución para la programación asíncrona en JS
- La antigua solución de programación asincrónica es: formulario de devolución de llamada puro, que es fácil de causar problemas de devolución de llamada.
Expresión concreta:
1. Sintácticamente: Promise es un constructor
2. Funcionalmente hablando: el objeto de promesa se utiliza para encapsular una operación asíncrona y obtener su resultado
3. Promise es una solución para programación asíncrona, que expresa operaciones asíncronas en el proceso de operaciones síncronas, evitando capas de funciones de devolución de llamada anidadas
4. Fue creado para resolver el infierno de devolución de llamada de procesamiento asincrónico (es decir, el problema de la anidación de bucles)
5. El papel de la promesa: cuando hay operaciones asincrónicas, especialmente cuando las operaciones asincrónicas anidan múltiples capas de operaciones asincrónicas y ocurre un infierno de devolución de llamada, estas operaciones asincrónicas se manejan de una manera elegante para aumentar la legibilidad y la capacidad de mantenimiento del código.

Los tres estados de la promesa

Cuando hay una operación asíncrona en desarrollo, puede envolver una Promesa para la operación asíncrona
Habrá tres estados después de la operación asíncrona
1. pendiente : estado de espera (ni cobrado ni rechazado), como una solicitud de red en curso o el temporizador no ha expirado
2. resuelto : estado satisfecho (la operación se completó con éxito), cuando volvemos a llamar activamente a resolver, estamos en este estado y volveremos a llamar entonces ()
3. rechazado : estado rechazado (operación fallida), cuando devolvemos la llamada de forma activa al rechazo, estamos en este estado y devolvemos la llamada a catch()
Cuando se llama a una promesa, comienza en un estado pendiente. Esto significa que la función de llamada continúa ejecutándose mientras la promesa aún está pendiente hasta que se resuelva, proporcionando a la función de llamada los datos que se solicitaron.
La promesa creada eventualmente terminará en un estado resuelto (resuelto) o en un estado rechazado (rechazado), y llamará a la función de devolución de llamada correspondiente (pasada a then y catch ) cuando se complete
diagrama de flujo

Llamada en cadena de promesas

Entonces o catch puede devolver un objeto Promise
Por lo tanto, nuestro código en realidad se puede encadenar
Puede envolver directamente los nuevos datos a través de Promise y devolver el objeto Promise
1. Promise.resolve() : envuelva los datos en un objeto Promise y vuelva a llamar internamente a la función resolve() (la función de devolución de llamada después del éxito)
2. Promise.reject() : envuelva los datos en un objeto Promise e internamente devuelva la llamada a la función de rechazo() (la función de devolución de llamada después de una falla)
Dado que la instancia creada por Promise es una operación asíncrona, el resultado de esta operación asíncrona solo puede tener dos estados
1. Estado 1 : la ejecución asincrónica debe llamarse internamente si la ejecución asincrónica es exitosa y la función de devolución de llamada exitosa resuelve devuelve el resultado a la persona que llama
2. Estado 2 : si la ejecución asincrónica falla, debe llamarse internamente y el rechazo de la función de devolución de llamada exitosa devuelve el resultado a la persona que llama
3. Dado que la instancia de Promise es una operación asincrónica, después de obtener el resultado de la operación, no se puede usar return para devolver el resultado de la operación a la persona que llama. En este momento, solo se puede usar la función de devolución de llamada para devolver el resultado de éxito o fracaso. a la persona que llama

API de promesa

Constructor de promesas :Promise (excutor) {}
- Excutor (): ejecución síncrona, el contenido en el cuerpo de la función
Promise.prototype.then(onResolved, onRejected) => {}
- onResolved (): función de devolución de llamada en caso de éxito
- onRejected (): función de devolución de llamada en caso de falla
- Descripción: Lo que se devuelve es un nuevo objeto Promise
```
const p = new Promise()
p.then(
  // onResolved()
  res => {
      
      }, 
  // onRejected()
  err => {
      
      }
)
```
Promise.prototype.catch()(onRejected) => {}
- onRejected (): función de devolución de llamada en caso de falla
- Descripción: azúcar sintáctico de then(), equivalente a(undefined, onRejected) => {}
Promise.resolve(value)
- valor: datos de éxito u objeto de promesa (éxito/fracaso)
Promise.reject(value)
- valor: motivo de datos fallidos u objeto de promesa (fallido)
Promise.all(promises)
- promesas: una matriz que contiene varias promesas, como: [promesa1, promesa2, promesa3]
- Descripción: devuelve una nueva promesa, solo si todas las promesas en la matriz tienen éxito, devolverá el éxito
Promise.race(promises)
- promesas: una matriz que contiene varias promesas, como: [promesa1, promesa2, promesa3]
- Descripción: Devuelve una nueva promesa, que es la primera promesa cumplida en la matriz

Temas clave en Promesas

¿Cómo cambiar el estado de promesa?
- resolve(): estado pendiente -> estado resuelto
- reject():estado pendiente -> estado rechazado
- Lanzar una excepción throw new Error()/ throw xxx: estado pendiente -> estado rechazado
Una promesa especifica múltiples funciones de devolución de llamada de éxito/fallo, ¿serán llamadas todas?
- Cuando la promesa cambia al estado correspondiente, se llamará a la función de devolución de llamada que especifica el estado correspondiente

¿Cuál viene primero para cambiar el estado de promesa y especificar el orden de la función de devolución de llamada?

Es posible; en circunstancias normales, la función de devolución de llamada se especifica primero y luego se cambia el estado

// 先指定回调函数，后改变状态
new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
    resolve() // 用定时器模块异步请求，改变状态
  }, 1000)
}).then( // then是同步进行调用的
	res => {
        
         .... }, // 同步执行，先指定成功的回调函数
  err => {
        
         .... } // 同步执行，先指定失败的回调函数
)

// 先改变状态，后指定回调函数
new Promise((resolve, reject) => {
        
        
  resolve() // 同步执行，先改变promise的状态
}).then(
	res => {
        
         .... }, // 同步执行，后指定成功的回调函数
  err => {
        
         .... } // 同步执行，后指定失败的回调函数
)

Puntos clave : cuando se encadenan promesas, ¿qué determina el estado del resultado de la nueva promesa generada por la función de devolución de llamada ejecutada por promise.then()?

Determinado por el resultado de la ejecución de la función de devolución de llamada especificada por el entonces actual

// 情况一
new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
    resolve(111) // 情况1
  }, 1000)
}).then(
	res => {
        
        
    // 此处生成新的promise的状态，又此处的执行结果决定
    // 由于此处执行结果未报错，因此promise状态为onResolved，但无返回值
    console.log('onResolved1', res) // 输出 onResolved1 111
  },
  err => {
        
        
    console.log('onRejected1', err)
  },
).then(
	res => {
        
        
    // 执行成功回调函数，无返回值，因此值输出为undefined
    console.log('onResolved2', res) // 输出 onResolved2 undefined
  },
  err => {
        
        
    console.log('onRejected2', err)
  },
)

// 情况二
new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
    resolve(111) // 情况2
  }, 1000)
}).then(
	res => {
        
        
    // 此处生成新的promise的状态，又此处的执行结果决定
    // 由于此处执行return，因此promise状态为onRejected，相当于成功返回222
    console.log('onResolved1', res) // 输出 onResolved1 111
    return 222 // 情况2
  },
  err => {
        
        
    console.log('onRejected1', err)
  },
).then(
	res => {
        
        
    // 执行成功回调函数
    console.log('onResolved2', res) // 输出 onResolved2 222
  },
  err => {
        
        
    console.log('onRejected2', err)
  },
)

// 情况三
new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
    resolve(111) // 情况3
  }, 1000)
}).then(
	res => {
        
        
    // 此处生成新的promise的状态，又此处的执行结果决定
    // 由于此处执行throw，因此promise状态为onRejected
    console.log('onResolved1', res) // 输出 onResolved1 111
    throw 333 // 情况3
  },
  err => {
        
        
    console.log('onRejected1', err)
  },
).then(
	res => {
        
        
    console.log('onResolved2', res)
  },
  err => {
        
        
     // 执行失败回调函数
    console.log('onRejected2', err) // 输出 onRejected2 333
  },
)

// 情况四
new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
    reject(111) // 情况4
  }, 1000)
}).then(
	res => {
        
        
    console.log('onResolved1', res)
  },
  err => {
        
        
    // 此处生成新的promise的状态，又此处的执行结果决定
    // 由于此处执行结果未报错，因此promise状态为onResolved
    console.log('onRejected1', err) // 输出 onRejected1 111
  },
).then(
	res => {
        
        
    // 执行成功回调函数
    console.log('onResolved2', res) // 输出 onResolved2 undefined
  },
  err => {
        
        
    console.log('onRejected2', err)
  },
)

¿Cómo promete encadenar múltiples tareas de operación (sincrónicas/asincrónicas)?

Concatenar múltiples tareas a través de llamadas en cadena

Nota: Al conectar tareas asincrónicas en serie, debe usar la nueva Promise para procesar las tareas asincrónicas.

new Promise ((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
    console.log('执行任务1（异步）')
    resolve(111)
  }, 1000)
}).then(
	res => {
        
        
    console.log('任务1的结果：', res)  // 任务1的结果：111
    
    console.log('执行任务2（同步')
    return 222
  }
).then(
	res => {
        
        
    console.log('任务2的结果：', res)  // 任务2的结果：222
    
    // 使用new Promise对异步任务进行处理
    new Promise((resolve, reject) => {
        
        
        setTimeOut(() => {
        
        
          console.log('执行任务3（异步）')
          reject(333)
        }, 1000)
    })
  }
).then(
  res => {
        
        
    ....
  },
	err => {
        
        
    console.log('任务3的结果：', res)  // 任务3的结果：333
  }
)

¿Excepción de promesa de transmisión/penetración?

Cuando la promesa hace una llamada en cadena de entonces, la devolución de llamada de captura se realiza al final

Cuando ocurre una excepción en cualquiera de los entonces anteriores, se transmitirá a la última captura para su procesamiento.

new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
 	 reject(111)
  }, 1000)
}).then(
	res => {
        
        
    ....
  }
  // 此时即使没有指定失败的回调函数，这里相当于执行了以下操作，err值为111
  // err => throw err
).then(
	res => {
        
        
    ....
  }
  // 此时即使没有指定失败的回调函数，这里相当于执行了以下操作，err值为111
  // err => throw err
).catch(
	err => {
        
        
  	console.log(err)  // 111
  }
)

¿Cómo romper la cadena de promesas? (Cuando se llama a la cadena de promesa, se interrumpe durante el proceso y no se realizan las siguientes llamadas de la cadena de promesa)

En la posición de la cadena de promesa que debe interrumpirse, devuelva un objeto de promesa en estado pendiente

new Promise((resolve, reject) => {
        
        
  setTimeOut(() => {
        
        
 	 resolve(111)
  }, 1000)
}).then(
	res => {
        
         .... },
  err => {
        
         .... }
).then(
	res => {
        
         .... },
  err => {
        
         .... }
).catch(
  err => {
        
         .... }
  // 需要在此处中断promise链调用，则需要返回一个pendding状态的promise对象，以下
  return new Promise(() => {
        
        })
).then(
	res => {
        
         .... },
  err => {
        
         .... }
)

Prometer una explicación detallada y cuestiones clave