Promise的基本语法

Posted 2023-04-21

参考技术A Promise用来表示延迟操作也就是异步操作的结果

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息
Promise主要用于异步计算
Promise 创建 Promise 创建

pending 是 初始状态
fulfilled 是 操作成功的状态
rejected 是 操作失败的状态

1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
2、.then()返回一个新的Promise实例，所以它可以链式调用
（1）如果then方法中回调函数返回一个值那么then返回的Promise将会成为Resolved状态，并且将返回的值
作为Resolved状态的回调函数的参数值。
var p = new Promise(function (resolve, reject)
resolve('fun');
);

3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值，则会立即执行下一级.then()
.then的情况
1、因为.then()返回的还是Promise实例
2、会等里面的then()执行完，再执行外面的

Promise

promise可以看成是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作的结果，相当于异步操作结果的占位符。从语法上说，promise是一个对象，由构造函数Promise创建而来，对象内部含有表示结果和状态的值。

一、基本用法

new Promise( 
    function (resolve, reject) { 
        setTimeout(() => { 
            if(true){//请求成功 
                resolve('结果123') //成功返回时调用 
            }else{
                reject('error info') //返回失败时调用
            }
    }, 2000)

}).then(
    (res) => {console.log(res)},// ’结果 123’
    (err) => {console.log(err)}// error//7/ro,
)

参数：传入一个函数(常为异步操作)作为参数，在创建promise对象时(即new时)会立即执行该函数。函数接收两个Promise内部方法resolve和reject。 

resolve(val)：异步操作成功时调用。将 promise对象的状态从pending变为 fulfilled。接收异步返回的数据为参数并设 置为promise对象内部的结果值。触发成功回调函数。

reject(error)：异步操作失败时调用。将promise对象的状态从pending变为rejected,接收错误信息为参数并设置为 promise对象内部的结果值。触发失败回调函数。

then(cb1，cb2)：得到promise对象后即可调用其原型方法then指定回调函数cbl和cb2,它们分别为fulfilled状态和rejected状态下的回调函数，接收对象的异步操作结果为参数。

cb1或cb2—定是在得到成功或失败的反馈结果后执行，无论什么时刻调用then。其内部原理是利用观察者模式，如果then调用时对象状态是等待中，则先将回调存入内部数组，等状态改变后统一触发执行。如果已经是成功或失败状态，则立即执行回调。

then的返回值是另一个新的promise对象，方便链式调用。

promise対象的三种状态：pending(待定),fulfilled(成功)及rejected(失败)。通过调用resolve和reject改变状态并触发回调函数。状态初始为pending,改变只能从 pending变为fulfilled,或从pending变为 rejected,—经改变，不会再变。

二、then的多次调用和延后调用

let p1 = new Promise(resolve => { 
    setTimeout(() =>{ 
        resolve('data');

    },3000);
})
//同一个promise对象可以调用多次then 
p1.then(res =>{ 
    console.log('回调1', res);
})
p1.then(res =>{ 
    console.log('回调2', res);
})
//可以在对象创建后经过一段时间在需要时调 用 then。
setTimeout(() =>{ 
    p1.then(res =>{ 
        console.log('回调3', res);
    });
}, 6000);

btn.onclick = function(){ 
    p1.then(res =>{ 
        console.log('回调4',res);
    });
}

延后调用适用场景：有一大段数据需要展示，但无需立即显示的，可以先提前加载，之后再预期展示或点击展示。调用时无需关心数据是否加载完成，如果加载完成会立即展示， 如果没完成则会等待完成后展示。

三、Promise.then的链式操作

Promise.prototype.then 方法返回的是一个新的promise对象(不是之前创建的那个promise实例)，可以采用链式写法。

1、then传入函数。若函数返回一个普通值。

即数字/字符/布尔等非promise对象的值，那么默认返回一个fulfilled状态的，结果为该返回值 (若无返回值则为undefined)的新promise对象。其后then为新promise调用的方法，参数函数接收新promise的结果。

new Promise( 
    function (resolve, reject) { 
        resolve(1)
    }
).then(
    (res) => {return res + 1;}).then(
    (res) => {console.log(res)}//2
)


//---------------


new Promise(
    function (resolve, reject) {
        resolve(1)
    }
).then(
    (res) => {return 'nana';}
).then(
    (res) => {console.log(res)}// 'nana'
)


//---------------


new Promise( 
    function (resolve, reject) { 
        resolve('2')
    }
).then(
    (res) => {console.log(res)} //2 
).then(
    (res) => {console.log(res)} //undefined。 第一个then传入的函数无返回值。默认返回 undefined。
)

2、then传入函数。如果函数的返回值是一个promise対象。

那么默认返回一个新的promise,其结果和状态跟函数返回的promise—致。后面的then传入的函数会等待新promise有了结果再进一步调用，解决了地狱回调问题。

function p1() {
    return new Promise ((resolve) => { 
        console.log(1); 
        resolve();
    });
}

function p2() {
    return new Promise((resolve) => { 
        console.log(2); 
        resolve();
    });
}

function p3() {
    return new Promise((resolve) => { 
        console.log(3); 
        resolve('Chaha');
    });
}

p1().then(()=>{ 
    return p2();
}).then(()=>{ 
    return p3()
}).then((res)=>{ 
    console.log(res); // 'haha'
})

3、特殊情况，then无传入或传入非函数

那么会返回一个继承了上一个处理状态的 promise 对象。

new Promise(function (resolve, reject) {
  resolve(1);
})
  .then()
  .then(
    (res) => {
      console.log(res);
    } //1
  );

三、Promise.all方法

将多个promise对象包装成—个新的 promise对象返回，新promise对象在所有参数promise对象都成功时才会触发成功 并得到一个结果数组值。一旦有任何一个参数promise对象失败则立即触发该 promise对象的失败。

var pl = new Promise((resolve, reject) => {
  resolve(1);
});
var p2 = new Promise((resolve, reject) => {
  resolve(2);
});
var p3 = new Promise((resolve, reject) => {
  resolve(3);
});
Promise.all([pl, p2, p3]).then(function (values) {
  console.log(values); //[1, 2, 3]
});

四、Promise.race方法

返回一个新的promise对象p,只要传入的promise参数p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的promise对象的值，就传递绐p。

var p = Promise.race([p1,p2,p3]);

五、Promise.resolve(value)方法

只接受一个参数并返回一个成功态的 promise对象。即返回的这个promise对象 是resolved后的。

var p = Promise.resolve([1,2,3]); 
p.then(function(v) { 
    console.log(v[0]); //1 
});