Promise—详解1节

Promise

前言：今天为了解决cesium截屏功能，飞哥给我发了一个方法，里边有Promise，我看到很长时间都不用这个对象了，忘了差不多了，本来今晚看一些其他的东西，还是及时整理下吧，明天就更不想整理了。

Promise 一般用来解决层层嵌套的回调函数（回调地狱 callback
hell）的问题，而不是为了解决一个回调函数而诞生的（当然一层嵌套也可以，没有说不行），时势造英雄，他的诞生一定有他的道理——降伏回调地狱（层层的回调函数）

首先看下什么是promise，我们直接看内部结构

console.dir(Promise);强行以对象的方法打开内部结构；

切记——不是log 赠送小知识点
（1）console.log()会在浏览器控制台打印出信息
（2）console.dir()可以显示一个对象的所有属性和方法

在这里插入图片描述

三联问中的第一问：1、是什么？

我们看到了了解到的reject和resolve，还有就是熟悉的constructor构造器，所以Promise是个对象，继续看prototype原型上有catch、then、finally等方法。

promise有三个状态：

1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤； promise状态一经改变，不会再变。

Promise对象的状态改变，只有两种可能：

从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

三联问中的第二问：2、怎么用？

构造函数创建实例

（1）参数：Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('运行成功之后');
    }, 2000);
});

这个时候我们输出了“执行完成”，然后调用了resolve就没有了，本身的promise只是创建了一个实例对象，并没有用。

所以我们平常一般把这个放在函数当中，返回一个promise对象

function demoAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
demoAsync()

这个时候我们执行这个函数就得到了一个promise对象，那么我们得到了这个对象就可以用对象中的方法then catch finally

demoAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作，数据的处理或者怎么样都可以
});

不就是相当于函数里边嵌套一个函数而已吗？这么费劲的难理解干嘛？下边的方法更容易理解不是吗？

function demoAsync(callback){
    setTimeout(function(){
        console.log('执行完成');
        callback('随便什么数据');
    }, 2000);
}

demoAsync(function(data){
    console.log(data);
});

三联问中的第三问：3、为什么？

没错，如果只是嵌套一层函数确实第二种更容易理解，但是Promise本质不是解决一层嵌套函数问题，而是为了解决层层的嵌套问题（回调地狱）

直接看—>栗子

function demoAsync1(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务1执行完成');
            resolve('数据1');
        }, 1000);
    });
    return p;            
}
function demoAsync2(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务2执行完成');
            resolve('数据2');
        }, 2000);
    });
    return p;            
}
function demoAsync3(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('异步任务3执行完成');
            resolve('数据3');
        }, 2000);
    });
    return p;            
}


demoAsync1()
.then(function(data){
    console.log(data);
    return demoAsync2();
})
.then(function(data){
    console.log(data);
    return demoAsync3();
})
.then(function(data){
    console.log(data);
});

//异步任务1执行完成，
//数据1
//异步任务2执行完成
//数据2
//异步任务3执行完成
//数据3

demoAsync1()
.then(function(data){
    console.log(data);
    return "数据1";
})
.then(function(data){
    console.log(data);
    return "数据2";
})
.then(function(data){
    console.log(data);
});

那么在上边直接传了一些数据，没有在里边加异步函数，这样没有promise，为什么还可以直接then?

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

这也就是为什么可以链式操作，因为本身then方法返回一个新的promise对象，所以不需要重新创建promise之后再进行下一个then

我们上述的then方法都是传的一个参数（一个函数）

实际上then传入的是两个参数（两个函数）我们刚开始将主要是讲了一下平常用法，没有往深入讲

then方法：可以接受两个回调函数作为参数，第一个回调函数是Promise对象状态变为resolved时调用。第二个回调函数是Promise对象的状态变为rejected时调用。

其中，第二个函数是可选的，不一定要提供，这两个函数都可以接受promise对象传出的值作为参数。

举例子：

const p1 =new Promise(function(resolve,reject){
    setTimeout(()=>{
        console.log("p1激活");
        reject(new Error('fail'))
    },3000)
})

const p2 = new Promise(function(resolve,reject){
    setTimeout(()=>{
        resolve(p1);
    },1000)
})

p2.then(result=>{
    console.log(result)
}),
    err=>{
    console.log(err)
    console.log("p2激活")
    return ”张名师“
}).then(
	msg=>console.log("resolved"+msg);
    msg=>console.log("rejected"+msg);
)


//p1激活
//Error:fail
//p2激活
//resolved：张名师

这个具体分析，在promise第二节说吧，有点晚了。第二节把里边的catch，finally，all，rece，resolve，reject方法一起说一下。明天中午或者晚上！