new Promise
(全篇大白话，你在这里不会看到别的专有名词，不会再有新的疑惑，一篇把你安排的明明白白。)
Promise的产生背景
为了让大家能够更清晰的了解什么是Promise，在这里我首先需要给大家尽量用通俗易懂的语言介绍下两个概念.
1. 浏览器处理同步异步机制
- 首先浏览器是多线程的，但是js是单线程的。
- 多线程就是有多条生产流水线，任务可以分派每一条生产线上。单线程就是只能按照js代码的书写顺序从上到下按照顺序执行.(浏览器只分配给了js单线程,就是这么孤独弱小无助，完全不是亲生的有某有。左右都是肉，浏览器其实也很无奈，不是不给js分配多线程，只是单线程会让Dom操作产生冲突，等一系列的问题，也是实在某的办法。)
- 只有单线程的js,碰到一些非常耗时的js代码,比如向后端请求数据(比如ajax)，网速如果进入5G++++++时代，光速一样，可能不会有什么影响，就怕重回原始2G,少女已经完成了到大嫂的蜕变，请求的数据才姗姗来迟。数据拿到了，然后咱们继续按照js代码书写顺序向下走，然后又碰到了请求数据，然后又一个少女完成了蜕变，这个蜕变过程，就是你经常听到的浏览器的阻塞。
- 浏览器看着自己的孩子(js)这么难，心里也是难受啊，为了避免这种阻塞，浏览器就想到了一个办法，每逢碰到这种耗时操作，就把这种操作，单独的放到一个内存空间中(这个内存空间就是我们常说的任务队列，你要是不常说，自动忽略常说二字)，我们写的js代码执行完之后，才会来到这个队列里面继续执行。
2. 什么是回调函数？
- 回调函数就是我们执行一些异步操作的时候，执行完之后，可以根据拿到执行结果进行一系列操作的一个函数。比如ajax请求后台数据，请求成功进行的操作，我们就可以称之为回调函数。
function ajax() {
var xhr= new xhrRequest();
//onreadystatechange中的操作就是一个异步操作
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.querySelector(".box").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "url", true);
xhr.send();
}
设想下，我们有很多个ajax请求，ajax1,ajax2,ajax3...,后面的请求都需要用到前面的请求值，这样我们不得不把后面的请求写到前面一个请求的回调函数里，如果只是多增加一层请求，可能对代码可读性并没有多大的影响，但是如果是很多层，我愿意拿你一天不吃饭去打赌，你肯定是不愿意在这样的代码上看下去的。
function ajax() {
var xhr = new xhrRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var xhr2 = new xhrRequest();
xhr2.onreadystatechange = function () {
var xhr3 = new xhrRequest();
xhr3.onreadystatechange = function () {
var xhr4 = new xhrRequest();
xhr4.onreadystatechange = function () {
// ...
}
xhr4.open("GET", `url.php?name=${xhr3.responseText}`, true);
xhr4.send();
}
xhr3.open("GET", `url.php?name=${xhr2.responseText}`, true);
xhr3.send();
}
xhr2.open("GET", `url.php?name=${xhr.responseText}`, true);
xhr2.send();
}
}
xhr.open("GET", "url.php?", true);
xhr.send();
}
看了上面的代码，举起你们的双手，大声告诉我，你们深深的迷失在里面无可自拔，如果你没有迷失，反而很酸爽，找我我在帮你嵌套100层，是男人就酸爽100层。不说100层，几乎没有人在嵌套了18层后，还能从里面逃出来，这就是传说中的回调地狱，为了把受苦受难的猿人们从地狱中解救出来.他来了，他来了，他内裤外穿走来了，他就是Promise.
Promise的使用
在长篇大论之前，我先说几点我在痛苦中总结的精髓。这个再网上其他地方基本是看不到的。每次看别人的文章，虽然可能很详细，但是对于当时还是非常小白的我来说根本没办法去理解。
- .catch就是.then中处理reject的函数的另一种写法，当在then中有对reject抛出的数据做一些逻辑处理时，.catch是不会触发，当.then中没有对reject抛出的异常做处理时，才会触发.catch。
- .catch写在一连串.then()之后.then().then().....then().catch()，无论哪一个.then里抛出了异常会触发.catch。
- promise或者.then()中代码出错或者主动reject()都会导致抛出异常。
- 每一个.then中返回的都是一个Promise对象，这也是为啥可以一直.then的原因。
- 只要是异步操作都可以写在new Promise之中，在一个代码块之中只能有一个resolve()||reject(),也就是在这俩出现之后，这个代码块之中再次出现都不会生效，代码块就是一个大括号包着的东西{ 。。。}。
- 差一点忘记一个很重要的东西，resolve(res)中的值，就是你异步操作，获取到的值，然后通过reslove()传到.then(res=>{console.log(res)})中，这样就不用一层套一层的处理数据，从而避免了回调地狱的产生。
function guess大小() {
let num = parseInt(Math.random() * 6 + 1)
return new Promise((resolve, reject) => {
if (num > 3) {
console.log('大');
resolve('then中的大')
console.log('大2');
} else {
console.log('小');
reject('then中的小')
console.log('小2');
}
console.log('开始啦1');
setTimeout(() => {
resolve(11111)
console.log(123);
}, 000);
console.log('开始啦2');
setTimeout(() => {
console.log(66666666);
}, 2000);
}
)
}
guess大小().then(
//下面这两个是es6中函数的写法，详情参见箭头函数
res=>{
//当为小时，就不会进入这一层，下面一层.then中的res就位undefined
console.log(res);
// return '2222'
return new Promise((resolve,reject)=>{
resolve (33333)
})
},
rej=>{
console.log(rej);
}
).then(res=>{
console.log(res);
})
依次打印为
大
大二
开始啦1
开始啦2
then中的大
'333'
'123'
'456'
'66666666'
通过上面代码以及打印结果，你不难发现，resolve,reject无论写在哪里，无论是同步代码中或者异步代码中，都会在这个执行之后，执行then,resolve和reject也是一个异步操作，在和这个异步操作处于同一个异步或者同步代码，优于.then中的代码先执行.setTimeout就是一个异步的代码,无论延迟时间是多少。
第一次接触某些知识可能有些绕，自己一定要动手实践下。编程不像是读书，你看了很多文章，就会对应的增加你很多知识。开发更多的像是健身，你看的健身相关方面的知识再多，带给你最多的可能就是和别人讨论的资本，但他真的对增加你身上的肌肉没有多少帮助。
想成为大牛，没有捷径可言。撸起你的双手，你敲的每一行有效代码，都会见证你的成长。
promise除了以上使用，还有两个不常用的使用方式，如果你感觉上面的还没有彻底理解，你完全可以不看，使用场景很少。
- Promise.all()
- Promise.race()
Promise.all()的使用
all中文含义'所有的'，由此我们不难猜测，Promise.all()就是同时执行多个Promise对象的。
let fighting = (time) => {
return new Promise((resolve, reject) => {
console.log(123);
setTimeout(() => {
resolve(`敌人还有${time / 1000}秒到达战场，全军出击`)
}, time)
})
}
let p1 = fighting(5000)
let p2 = fighting(10000)
//注意观察all参数数组中每一项的顺序
Promise.all([p1, p2]).then((result) => {
console.log(result) // [ '敌人还有5秒到达战场，全军出击', '敌人还有10秒到达战场，全军出击' ]
}).catch((error) => {
console.log(error)
})
Promise.all([p2, p1]).then((result) => {
console.log(result) // [ '敌人还有10秒到达战场，全军出击', '敌人还有5秒到达战场，全军出击' ]
}).catch((error) => {
console.log(error)
})
通过以上代码不难发现，Promise.all()参数是一个数组，数组里的一个个的Promise对象，他们传递给then的结果也是一个数组，这个数组里的顺序是和all中数组顺序一一对应的,只有在这个数组中所有的Promise对象都执行完成才会获得这个结果。catch中会得到最先捕获到的错误。在开发中，Promise.all()主要使用在需要多个异步完成后，才能进行的回调。
Promise.race()的使用
race中文含义'速度'，由此我们依然可以很容易猜到，Promise.race()也是同时执行多个Promise对象的。
let fighting = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`敌人还有${time / 1000}秒到达战场，全军出击`)
}, time)
})
}
let p1 = fighting(10000)
let p2 = fighting(5000)
Promise.race([p1, p2]).then((result) => {
console.log(result)//敌人还有5秒到达战场，全军出击
})
Promise.race()中参数和Promise.all()相同，仍然是一个数组，数组里还是一个一个的Promise对象，不同的是传递给then的结果是这些Promise对象中最先执行完成的那个所传递的，是一个字符串形式。开发中，几乎很难碰到Promise.race()的使用场景。
一个梦想开饭店却被迫辗转在前端的荣耀王者渣渣。
说在最后的话
千山万水都是情，点点关注行不行。
万水千山都是爱，留个评论也不赖。
全篇都是小编我一个字一个字码出来的，如果我的文章真的对你有帮助，还请动动你发财的小手，助力我早日开个饭店。
赚钱是顺便的，不让每一个初入前端的人走我走过的痛苦是认真的。
本人渣渣，难免不足，欢迎指正。
