Promise的概念

什么是Promise
js是一个单线程语言，Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再变

let p = new Promise(function(resolve, reject){
		//做一些异步操作
		setTimeout(function(){
			console.log('执行完成Promise');
			resolve('要返回的数据可以任何数据例如接口返回数据');
		}, 2000);
	});

打开控制台刷新等了两秒会出来，这里我是只是实例了一下这个对象，并没有执行，这跟我直接写一个计时器貌似没啥区别

我们要在使用的这个promise对象时再声明它

<div onclick='hh'>点我触发</div>
function hh () {
	let p = new Promise(function(resolve, reject){
			//做一些异步操作
			setTimeout(function(){
				console.log('执行完成Promise');
				resolve('要返回的数据可以任何数据例如接口返回数据');
			}, 2000);
		});
	return p; // 执行结束顺便把这个实例的promise抛出去这个一会有用 
	// 这样的话勉强能达成效果但貌似还是和直接写计时器效果一样
}

promise的内置方法then、catch

继续上面的代码
hh()
.then((data) => {console.log(data)})

function hh () {
	let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				console.log('执行完成Promise');
				reject('错误信息');
			}, 2000);
		});
	return p; 
}
hh()
.catch((data) => {console.log(data)})

也可以

hh()
.then((data) => {console.log(data)}) // 对应的是Promise中的resolve()
.catch((data) => {console.log(data)}) // 对应的是Promise中的reject() 
// 以上两方法只要触发一个就会停下来
hh()
.then((data) => {console.log(data);})
.then((data) => {console.log(data);return hh()})
.then((data) => {console.log(data);return hh()})
.then((data) => {console.log(data);return hh()})
// 这个的精髓就是会不断return一个Promise对象来实现链式编程就和jQuery一样

all的用法

function hh(){
        let p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('执行完成Promise');
                // reject('错误信息');
                resolve('要返回的数据可以任何数据例如接口返回数据');
                // reject('cuowo');
            }, 2000);
        })
        return p;
    }
    function hh1(){
        let p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('执行完成Promise');
                // reject('错误信息');
                resolve('要返回的数据可以任何数据例如接口返回数据');
                // reject('cuowo');
            }, 5000);
        })
        return p;
    }
    Promise.all([hh(),hh(),hh1()]).then((data)=>{console.log(data)});

根据结果我们可以知道all是在（）中所有执行结束后返回结果的，也就是以最慢的为基准

race

将hh和hh1的延迟时间修改

function hh(){
        let p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('执行完成Promise');
                // reject('错误信息');
                resolve('要返回的数据可以任何数据例如接口返回数据');
                // reject('cuowo');
            }, 5000);
        })
        return p;
    }
    function hh1(){
        let p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('执行完成Promise');
                // reject('错误信息');
                resolve('要返回的数据可以任何数据例如接口返回数据');
                // reject('cuowo');
            }, 1000);
        })
        return p;
    }
    Promise.race([hh(),hh(),hh1()]).then((data)=>{console.log(data)});

只会返回出先执行结束的promise实例的resolve或者reject结果其他的不管，也就是以最快的为基准