Promise是ES6的新特性,是异步编程的一种解决方案
从语法上说,Promise是一个对象,从它可以获取异步操作的消息,可以解决回调地狱(回调地狱嵌套回调函数)
Promise的含义:本身不是异步,是封装异步操作容器,统一异步的标准
Promise对象的特点:对象的状态不受外界影响,一旦状态改变，就不会再变，任何时候都可以得到这个结果
一.前引
js中的异步操作有哪些
1 ajax请求
2 var xhr = new XMLHttpRequest();
3 xhr.onreadystatechange=function(){}
4 xhr.addEventListener('readystatechange',function(){})
5 浏览器事件
6 ele.onclick=function(){}
7 定时
8 setTime(function(){
9 },1000);
2.回调函数
1 函数的参数是另外一个函数 2 setTime(function(){ 3 },1000);
二.Promise 的优缺点
优点：
1、将异步操作以同步操作的方式表达出来，避免层层嵌套回调函数
2、提供统一的操作接口，方便对异步操作的控制
缺点：
1、promise一旦建立，则不可取消
2、如果不设置回调函数，则会在promise内部抛出错误，不会反应到外部
3、当状态是pending是，无法判断当前状态（是异步刚刚开始执行还是即将完成了异步操作）
三.状态
1.pending 进行中,当异步操作执行中
2.resolve 操作成功状态
3.rejected 操作失败的状态
四.对原生ajax封装
1 function aa(method='get',path='1.php'){
2 return new Promise((f1,f2)=>{
3 let request = new XMLHttpRequest();
4 request.open(method,path);
5 request.send();
6 request.onreadystatechange=()=>{
7 if(request.readyState ==4){
8 if(request.status ==200){
9 f1.call(null,request.responseText)
10 }else{
11 f2.call(undefined,request.status)
12 }
13 }
14 }
15 })
16 }
17 aa('get','1.php').then(function(da){
18 console.log(da)
19 }).then(function(da){
20 aa('get','2.php').then(function(da){
21 console.log(da)
22 })
23 })
五.Promise基本API
1.实例方法
1 .then() 得到异步任务正确的结果
2 .catch() 获取异常信息
3 .finally() 方法用于指定不管Promise对象最后状态如何,都会执行的操作
成功与否都会执行（不是正式标准）
1 <script type="text/javascript">
2 /*
3 Promise常用API-实例方法
4 */
5 // console.dir(Promise);
6 function foo() {
7 return new Promise(function(resolve, reject){
8 setTimeout(function(){
9 // resolve(123);
10 reject('error');
11 }, 100);
12 })
13 }
14 // 两种写法是等效的
15 foo()
16 .then(function(data){
17 # 得到异步任务正确的结果
18 console.log(data)
19 },function(data){
20 # 获取异常信息
21 console.log(data)
22 })
23 # 成功与否都会执行（不是正式标准）
24 .finally(function(){
25 console.log('finished')
26 });
27 </script>
2.静态方法
1 .all()
Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
2 .race()
Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
1 <script type="text/javascript">
2 /*
3 Promise常用API-对象方法
4 */
5 // console.dir(Promise)
6 function queryData(url) {
7 return new Promise(function(resolve, reject){
8 var xhr = new XMLHttpRequest();
9 xhr.onreadystatechange = function(){
10 if(xhr.readyState != 4) return;
11 if(xhr.readyState == 4 && xhr.status == 200) {
12 // 处理正常的情况
13 resolve(xhr.responseText);
14 }else{
15 // 处理异常情况
16 reject('服务器错误');
17 }
18 };
19 xhr.open('get', url);
20 xhr.send(null);
21 });
22 }
23 var p1 = queryData('http://localhost:3000/a1');
24 var p2 = queryData('http://localhost:3000/a2');
25 var p3 = queryData('http://localhost:3000/a3');
26 Promise.all([p1,p2,p3]).then(function(result){
27 // all 中的参数 [p1,p2,p3] 和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
28 console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
29 })
30 Promise.race([p1,p2,p3]).then(function(result){
31 // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
32 console.log(result) // "HELLO TOM"
33 })
34 </script>
————————————————
原文链接：https://blog.csdn.net/qq_50384924/article/details/117521833