ES6 Promise(一) promise的概念和基础用法

promise是es6提供的实现异步编程的解决方案

es6内置的一个构造函数，用来生成Promise的实例

一．promise 实例的3种状态

1.pending (进行中)

2.fulfilled (成功) promise按承诺实现了

3.rejected (失败) promise没有按承诺实现

4.状态可以改变

pending -> fulfilled

pending -> rejected

注意：状态只能改变一次，以后就不能在改变了，任何时候都可以得到这个结果

　　　只要promise改变了状态，都可以认为promise完结了(settled)

二．Promise传参

Promsie()传一个回调函数，函数内部传2个参数方法(resolve,reject),这个函数是立即执行的

例子：

let promse = new Promise((resolve/*成功时用*/,reject/*失败时用*/) => {
    // 马上执行
    let a = 1+1;
    if(a === 2){//成功
        resolve('a真的等于2！');//报告成功的结果
    }else{
        // 失败
        reject('a不等于2');//失败的时候报告失败的原因
    }
}/*exector 执行者*/)

三．promise实例的3个方法

then(成功的函数,失败的函数);//然后

catch(失败的函数);//抓住，捕获

finally(回调函数，无参);最后执行

1.then 然后...  两个参数

then(successFn()成功的回调函数方法，failureFn()失败的回调方法)

promise.then(v => {}); //只处理成功(一个参)

promise.then(undefined,r =>{}); 只处理失败(第二个参数)

then执行的参数的 函数都是异步执行

//例子1：
promise.then(value=> {
    console.log('成功消息',value);
},reason => {
    console.log('失败的原因：',reason)
})

//例子2 (promise的函数立即执行)：
console.log(1);
new Promise(resolve => {
    console.log(2);
    resolve();
}).then(() => {
    // 异步
    console.log(3);
})
console.log(4);//打印顺序 1，2,4,3

//例子3 (状态只能改变一次)：
new Promise((resolve,reject) => {
    console.log(1);
    resolve(1);
    console.log(2);//执行
    resolve(2);//忽略，不执行，状态只能改变一次
    console.log(3);//执行
    reject('abc');//忽略
}).then(v => {
    console.log('then',v);
},reason => {
    console.log('失败',reason)
})
// 打印顺序： 1,2,3，then 1

1-2.回调地狱

在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，如果嵌套过多，会极大影响代码可读性和逻辑，这种情况也被成为回调地狱

//例子：
function delay(ms,callback){
    setTimeout(callback,ms);
}
delay(1000,() => {
    console.log('延迟了1000毫秒');
    delay(3000,() => {
        console.log('延迟了3000毫秒');
        delay(2000,() => {
            console.log('延迟了2000毫秒')
        })
    })
})

//例子2 (管道写法)：
function delay(ms){
    return new Promise(resolve => {
        setTimeout(resolve,ms);
    })
}
delay(1000).then(() => {
    console.log('promise延迟了1000毫秒');
    return delay(3000);
}).then(() => {
    console.log('promise延迟了3000毫秒');
    return delay(2000);
}).then(() => {
    console.log('promise延迟了2000毫秒');
})

2.catch()

catch(failureFn);then没有失败时函数，就会执行catch

3.finally()

finally方法(最后的) 无论成功/失败都会执行

finally(function(无参){});只要改变状态租后都进入finally，不接收参数

//例子1：
new Promise((resolve,reject) => {
    reject();
}).then(() => {
    console.log('then');
}).catch(() => {//then没有失败函数，就会执行catch
    console.log('catch');
})

//例子2：
new Promise((resolve,reject) => {
    if(Math.random() > 0.3){
        resolve();
    }else{
        reject();
    }
}).then(() => {
    console.log(1);
    return 1;
}).then(() => {
    console.log(2);
    return 2;
}).catch(() => {
    console.log(3);
    return 3;
}).finally(() => {
    console.log('最后...');
})

4.then、catch、finally3个方法的返回值

①   then() 返回一个新的promise实例

回调函数如果正常return,promise状态就变为成功，值就是return值

回调函数如果throw error,promise状态就会变为失败，值就是throw值

throw new Error(‘错误提示文字’)

②   catch() 返回一个新的promise实例

③   finally() 返回一个新的promise实例

④   当then throw ‘一个错误’,代码往下不会在执行then()方法，而是执行catch方法

当then() 方法 return Promise.reject()时(一个状态失败的promise实例)，也不会执行下面的then()方法,而是catch()方法

⑤   catch throw/return Promise.reject时，往下执行会进入catch,不会进入then

⑥   finally 没有返回值，往下执行可以执行then方法，throw一个错误，会往下执行catch