JS中的Promise：
MDN上面对promise的描述：Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
可以直接对字面上理解：Promise：承诺，一诺千金，只要你有承诺就得执行，不管时间过了多久，执行完就行，而且还是异步的，比如你是一个言出必行的大丈夫，你说总有一天完会把大黄蜂（科迈罗）买回家，奋斗了5年攒够了钱，然后下单，异步就是你承诺了要买大黄蜂，但你还是可以做其他的事，因为生活总得继续。
console.log('下个目标，5年买科迈罗！');
new Promise((resolve, reject) => {
console.log('正在奋斗中。。。。');
//你可以执行的代码
//经过了5年的奋斗，我们用延迟函数代替代码执行的时间,3秒
setTimeout(() => {
console.log('奋斗了5年，并攒够了钱！');
resolve('下单');
},3000)
}).then(value => {
console.log(`${value},带着女神出去浪`);
})
console.log('一边享受生活一边奋斗。。。。');
运行结果：
下个目标，5年买科迈罗！
正在奋斗中。。。。
一边享受生活一边奋斗。。。。
奋斗了5年，并攒够了钱！
下单,带着女神出去浪
这是最简单的Promise了，接下来我们正式介绍一下Promise：MDN描述：Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
简单来说Promise里面可以执行一些获取数据库数据的代码，因为获取时间比较长，因为JS是单线程的，不能因为获取数据让其他事件不能加载。
一个 Promise有以下几种状态:
- pending: 初始状态，既不是成功，也不是失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
返回看上面那个例子，一开始有两个参数resolve => 成功, reject => 失败.还有个重点：Promise状态发生改变，就会触发.then()里的响应函数，处理后续步骤.
console.log('start');
new Promise((resolve, reject) => {
console.log('first promise');
resolve('succeed');
setTimeout(() => {
console.log('最后才执行到我！');
},2000)
}).then(value => {
console.log(`${value},first then`);
})
运行结果：
start
first promise
succeed,first then
最后才执行到我！
上面那个例子，执行到resolve（），当前的promise的状态改变了，就开始执行下面的then，不会等待settimeout执行完。
结合下面的图可以理解下：
当然promise还可以当作一个变量来对待，比如下面的例子，不一定要紧接着（）后面.then();
console.log('start');
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('the promise fulfilled');
resolve('hello,world');
},1000);
});
//上面的promise完成后，过3秒再执行then，还是可以存在的，可以作为一个变量。
setTimeout(() => {
promise.then(value => {
console.log(value);
})
},3000)
接下来来说说.then()，经过上面的理解，可以看出.then()相当于一个promise，它也返回一个新的Promise实例，所以它可以链式调用，接受两个参数，也就是Promise中的两个状态：fulfilled,rejected,当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行。
'use strict'; console.log('that\'s begin'); let myPromise = new Promise((resolve, reject) => { console.log('first promise'); //resolve是传递参数给下一个then resolve('first succeed'); }).then( value => { console.log('value'); return new Promise((resolve, reject) => { setTimeout(() => { reject('thie is error'); },2000) }); //当上面出错时调用下面的catch }).catch((reason) => { console.log(reason); })
再看个返回失败的例子，返回成功时用resolve，后面就用.then()来处理后续步骤，返回失败时用rejected，后面就用.catch()来处理后续步骤。
console.log('that\'s begin');
let myPromise = new Promise((resolve, reject) => {
console.log('first promise');
//resolve是传递参数给下一个then
resolve('first succeed');
}).then( value => {
console.log('first then succeed');
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('thie is error');
},2000)
});
//当上面出错时调用下面的catch
}).then( value => {
console.log(`成功执行到最后：${value}`);
})
.catch( reason => {
console.log(`最终以失败告终：${reason}`);
})
运行结果：
that's begin
first promise
succeed
最终以失败告终：thie is error
下面讲一个Promise的all函数：Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（rejecte），失败原因的是第一个失败 promise 的结果，MDN讲的很清晰，直接看例子：
console.log('start all promise');
let promise1 = Promise.reject('我是第一个reject');
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('我是第二个reject');
},1000);
});
Promise.all([promise1, promise2, promise3]).then( value =>{
console.log(value);
}).catch(reason => {
console.log(`失败原因的是第一个失败 promise 的结果：${reason}`);
})
运行结果：
start all promise
失败原因的是第一个失败 promise 的结果：我是第一个reject
如果都是resolve的话才算成功，如果前面的promise没有返回resolve或者没有返回reject那么下面的then（）就不会执行。
JS中的跨域
请求跨域有好多种，
一、跨域资源共享：
也就是设置服务端的header，可以指定哪些域名可以请求，也是最简单的跨域方式（自我感觉），并且可以支持post等等。
//指定允许其他域名访问 'Access-Control-Allow-Origin:*'//或指定域 //响应类型 'Access-Control-Allow-Methods:GET,POST' //响应头设置 'Access-Control-Allow-Headers:x-requested-with,content-type'
二、jsonp
由于浏览器的同源策略，所以ajax不能直接跨域请求数据，我们把浏览器的安全策略组关掉（也就是关掉同源策略）就可以啦，当然这是开个玩笑。想了解可以访问这个网站：https://www.cnblogs.com/zhongxia/p/5416024.html
上面说的是ajax会被同源策略拦截下来，但是script中的src并不会被拦截，我们可以利用这个特性实现跨域：
<script>
//下面就输出你在服务端请求的数据
function dosomething(data){
console.log(data);
}
</script>
//src 就是你想要请求的地址,cb是请求时带的参数，这是必须要加的，因为上面的函数名也是这个
<script src="http://localhost:8080/ChickensSys/backDate?cb=dosomething"></script>
服务端要做相应的配合，这边是用javaweb来调试：在doGet函数里面添加这些代码：
response.setContentType("text/html");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String cbString = request.getParameter("cb");
PrintWriter out = response.getWriter();
out.println(cbString + "("this is jsonP ")");
out.flush();
out.close();
仔细看：out.println(cbString + "("this is jsonP ")");
我们把参数结果带入进去，可以发现输出的是cb("this is jsonP");相当于是调用这个函数，没错，结果就是这样。
你会看到页面的控制台打印了this isjsonP。
结论：我们用src（不会被同源策略拦截）请求别的域名的数据，返回的结果放在已定义好的函数参数里面并且执行这个函数，然后你要对数据做哪些操作就可以在函数里面随便操作。
三、window.name + iframe跨域获取数据
这个的原理和jsonP差不多吧，也是利用src，不过这次是利用iframe(可以理解html中一个内嵌页面，也可以包含一个html文件)的src和window.name的特性来跨域， window.name属性的神奇之处在于name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。也就是你第一次设置后，不管你的iframe重定向到哪个页面，window.name都不会变。
<script type="text/javascript"> let iframe = document.createElement('iframe'); //src你请求的地址,此时会报错，说你跨域了 iframe.src = 'http://localhost:8080/ChickensSys/backDate'; document.body.appendChild(iframe); iframe.onload = function() { //在本地新建空白的proxy.html因为上面报错了，这边赶紧重定向到本地的proxy.html iframe.src = 'proxy.html';
//contentWindow属性是指指定的frame或者iframe所在的window对象。 console.log(iframe.contentWindow.name) }; </script>
服务端需要相应的配合：
out.println("<script>window.name = \"this is CORS</script>");
预期结果跟我们想的一样，一开始报错，我们重定向到本地后就没报错，输出结果也是没错的，因为服务端输出的是一个脚本，window.name=" ";还记得上面讲过window.name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化）。但是为什么会一直调用onload函数呢，因为在onload函数中又被重定向所以又一次调用，跟递归差不多意思。既然可以拿到数据，那我们下面来改进下，让它不报错，并只拿到一次数据。
<script> let iframe = document.createElement('iframe'); iframe.style.display = 'none'; var state = 0; iframe.onload = function() { //重定向完，可以取window.name的数据了，这边可以对数据进行处理 if(state === 1) { var data = iframe.contentWindow.name; console.log(data); //移除这个节点，其实上面display：none已经对dom无影响了，这个加了保险 document.body.removeChild(iframe); //当下面的iframe.src执行到时，也就是第一次onload，迅速重定向到本地 } else if(state === 0) { state = 1; iframe.src = 'proxy.html'; } }; iframe.src = 'http://localhost:8080/ChickensSys/backDate'; document.body.appendChild(iframe); </script>
运行结果：
只有一次请求。
上面只是讲下原理，我们可以对上面做个封装，封装成一个函数，方便以后用：
<script>
//url是请求的地址，handle是处理数据的函数
function getDataWithIframe(url, handle){
let iframe = document.createElement('iframe');
iframe.style.display = 'none';
var state = 0;
iframe.onload = function() {
//重定向完，可以取window.name的数据了，这边可以对数据进行处理
if(state === 1) {
handle(iframe.contentWindow.name);
//移除这个节点，其实上面display：none已经对dom无影响了，这个加了保险
document.body.removeChild(iframe);
//当下面的iframe.src执行到时，也就是第一次onload，迅速重定向到本地
} else if(state === 0) {
state = 1;
iframe.src = 'proxy.html';
}
};
iframe.src = url;
document.body.appendChild(iframe);
}
let url = 'http://localhost:8080/ChickensSys/backDate';
getDataWithIframe(url, function(data){
console.log('这是请求来的数据：' + data);
})
</script>
总结：看了好多跨域，大部分都是通过src来跨域的，但好像通过src的都只能是get请求，比如刚说的jsonP和iframe+window.name的方式都是通过get来请求数据，而且都是需要要后端进行相应的配合，比如jsonP需要加个cb（)来执行函数,iframe需要<script>window.name=" "</script>来执行赋值语句，第一种设置后端的header的方式倒是可以支持post请求，真是又简单又好用。。。