Notas de estudio: explicación detallada de los objetos Promise en ES6

---

Hay un objeto importante Promise en ES6, que puede ser utilizado por new. Representa lo que sucederá en el futuro y se usa para describir los resultados de las operaciones asincrónicas. La función a menudo incluye código asincrónico y que consume mucho tiempo.

1. Configuración básica de Promise:

{              挂起      成功        失败
    status: 'pending | fulfilled | rejected', // status最多只能变化一次
    // 状态的改变只有两种可能：pending -> fulfilled, pending -> rejected
    data: undefined,    // 需要携带的数据，没有默认undefined
    success: null,      // 成功的回调函数
    failure: null,      // 失败的回调函数
    then: function(fn, fn2) {
        this.success = fn;
        this.failure = fn2;
    },
    resolve: function(data) { 获取一个成功状态的promise
        this.data = data;
        this.status = "fulfilled";
    },
    reject: function(data) { 获取一个失败状态的promise
        this.data = data;
        this.status = "rejected";
    }
}

Ventajas: el código asincrónico está representado por un proceso sincrónico. Evite las devoluciones de llamada del infierno (las funciones de devolución de llamada están anidadas en capas).

Desventajas: no se puede cancelar después de la creación y se debe configurar una función de devolución de llamada.

2. Creación del objeto Promise:

var p =  new Promise(function(resolve,reject) {
    setTimeout(function() {
        
    }, 2000);
}).then(function(data) => {})
  .catch(function(data) => {});

Catch es esencialmente una función then especial (el primer parámetro es nulo y el segundo parámetro es una función) La función then y la función catch de Promise siempre devuelven un nuevo objeto de promesa. De esta manera, podemos continuar el entonces, y la Promesa estipula: el valor de retorno de la función de parámetro anterior entonces se pasará a la siguiente función de parámetro como parámetro. Si no hay ninguna indicación en el entonces, devuelve una Promesa fallida o ocurre una excepción, la función then Y la función catch siempre devuelve una Promesa exitosa.

Promise.resolve(123).then(data => { console.log(data); return Promise.resolve(456) }) 
// data 123
                    .then(data => { console.log(data); return Promise.reject(789) })  
// data 456
                    .catch(data => { console.log(data); }) // data 789

 3. Métodos en promesa (aún no utilizados):

Promise.all ([p1, p2, p3]) envuelve varias instancias de Promise en un nuevo objeto de Promise. El parámetro no es necesariamente una matriz

El estado de Promise.all ([p1, p2, p3]) se divide en dos casos:

Solo cuando los estados de p1, p2 y p3 se cumplan, se cumplirá el estado de p. En este momento, los valores de retorno de p1, p2 y p3 forman una matriz, que se pasa a la función de devolución de llamada de p.

Siempre que se rechace uno de p1, p2 y p3, el estado de p pasa a ser rechazado y el valor de retorno de la primera instancia rechazada se pasará a la función de devolución de llamada de p.

// 第一种情况,全是成功状态
var p1 = new Promise((resolve, reject) => { let data = 10; resolve(data) });
var p2 = new Promise((resolve, reject) => { let data = 100; resolve(data) });
var p =  Promise.all([ p1, p2 ]);
p.then((datas) => { console.log(datas); });    // [10, 100]

// 第二种情况, 有一个是失败状态
var p1 = new Promise((resolve, reject) => { let data = 10; resolve(data) });
var p2 = new Promise((resolve, reject) => { let data = 100; reject(data) });
var p =  Promise.all([ p1, p2 ]);
p.then((datas) => { console.log(datas); }).catch((datas) => { console.log(datas); });// 100

El método Promise.race también envuelve varias instancias de Promise en una nueva instancia de Promise.

Siempre que el estado de un objeto en Promise.race ([p1, p2, p3]) cambie primero, su estado cambiará en consecuencia. El valor de retorno de la instancia de Promise que cambia primero se pasa a su valor de retorno.

Y si los parámetros de los métodos Promise.all () y Promise.race () no son objetos Promise, los métodos Promise.resolve y Promise.reject se llamarán primero.

var p1 = Promise.resolve('成功了');
p1.then(data => { console.log(data); }); 	// 成功了

var p1 = Promise.reject('失败了');
p1.then(null, data => { console.log(data); }); 	// 失败了

Los objetos de promesa se utilizan a menudo para describir operaciones asincrónicas y que requieren mucho tiempo. También usaremos objetos Promise para encapsular Ajax y algunas operaciones asincrónicas que consumen mucho tiempo. Haz que el código sea más elegante.