ES6-Promise对象获取异步操作的消息

系统管理员 2023-06-10 05:19 16阅读 0赞

# Promise是什么 #

JS 是单线程的，不过可以执行异步任务，异步任务不会阻塞主线程，在Promise之前一般使用回调函数来传递异步操作的消息。  
Promise是ES6的原生对象，它是一个构造函数，Promise对象用来传递异步操作的消息，Promise一般作为多层回调嵌套的解决方案。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
假设有A,B,C三个异步请求，B请求依赖A请求的数据，C请求依赖B请求的数据，也就是说我们希望异步的执行顺序是A->B->C,并且一旦哪个任务出现了错误，就中断执行。  
如果使用回调函数B请求要写在A请求的回调函数里面，C请求要写在B请求的回调函数里面，这样的情况执行顺序会混乱，不好阅读、调试和维护。这种函数作为参数层层嵌套也叫回调地狱。

举个例子，使用jquery的ajax方法通过A请求获取女孩的姓名，获得女孩姓名后通过B请求女孩的长相？如果女孩漂亮通过C请求获取女孩是不是有男朋友。

$.ajax({ 
        url:urlA,
        success: function(res) { 
          console.log('A请求获取到名字了');
          $.ajax({ 
            url:`${ urlB}?name=res.girlName`,
            success: function(res) { 
              console.log('B请求获取到长相了');
              if(res.looks=='pretty'){ 
                $.ajax({ 
                  url:urlC,
                  success: function(res) { 
                    console.log('C请求获取到有没有男友了');
                  },
                  error: function(err){ 
                    console.log('C失败')
                  }
                });
              }
            },
            error: function(err){ 
              console.log('B失败')
            }
          });
        },
        error: function(err){ 
          console.log('A失败')
        }
      });

# Promise语法 #

通过new操作符创建一个Promise实例，Promise是构造函数，Promise中保存着异步操作的状态（pending,resolved,rejected）。  
其参数是一个函数，函数又有两个方法作为参数：resolve和reject。

const promise = new Promise(function (resolve, reject) { 
    });
    console.log(promise);

![在这里插入图片描述][20191026105515448.png]  
Promise对象代表一个异步操作，有三种状态，其中pending为初始状态，fulfilled和rejected为结束状态，结束状态表示promise的生命周期已结束。。

*  执行中：pending
 *  成功： Fulfilled或称Resolved，Chrome中称Resolved，Firefox称Fulfilled
 *  拒绝：rejected

Promise对象的生命周期，只有两种可能：  
从Pending变为Resolved  
从Pending变为Rejected

> resolve方法和reject方法都用来改变异步操作的状态，并返回异步执行的结果。  
> 一旦Promise对象的状态变为resolve或reject，在Promise对象的then方法就能够获取到执行结果，Promise对象的状态变为reject，Promise对象的catch方法就能够获取到执行结果。

我们来测试一下异步成功和失败的状态

### then方法 ###

Promise的原型对象中有个then方法，用于绑定异步操作的回调函数，这个方法可以有两个参数（回调函数），分别表示成功和失败的处理。

以上代码控制台会打印“resolve方法被调用，Promise状态为resolved或fulfilled”

### catch方法 ###

catch方法与then类似，不过catch只接受一个参数，只用于处理异步失败。  
上面的代码这样改写更加简练

## 链式操作 ##

promise允许链式调用，通过显示指定then方法的返回值可以实现链式调用

*  如果在then方法中返回一个新的Promise对象， 这个Promise对象会接管后面的链, 具体执行什么将取决于这个Promise对象是resovle还是reject。
 *  如果在then方法中返回一个普通对象，将作为下次then函数的参数传入

下面的代码中，异步的执行顺序是A->B->C,并且一旦哪个任务出现了错误，就中断执行。

new Promise(function (resolve,reject) { 
        resolve(100);
      }).then(data=>{ 
        console.log(data);
        return data+1
      }).then(data=>{ 
          console.log(data);
          return data+1
      }).then(data=>{ 
          console.log(data);
          return data+1
      });

## Promise的静态方法 ##

#### Promise.all( )方法 ####

Promise.all( )方法接受一个数组作为参数，数组的元素是Promise对象，当参数中的Promise对象的状态都为resolved时，Promise.all( )才会有结果返回。

![在这里插入图片描述][20191108152846589.png]

#### Promise.race( )方法 ####

Promise.race( )方法的参数与Promise.all( )方法一样是一个元素为promise对象的数组，但它的参数中的promise实例，只要有一个状态发生变化（不管是成功resolved还是异常rejected），它就会有结果返回。

## async/await 与Promise ##

async/await是ES7语法，能够使异步代码更像同步的代码。

*  async用于声明一个异步函数，async函数会返回一个`promise对象`，并且Promise对象的状态值是resolved。

async function demo(){ 
    	return 1;
    }
    console.log(demo());

![在这里插入图片描述][20200417151800445.png]

*  await必须放在async函数的内部，表示等待一个执行的结果，再向下执行（await会阻塞后面的代码）。await后面一般是一个异步任务，这样在async函数的内部，await使异步代码更像同步的代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20230531/78b9e71f5fab487e8455b59f7a3ed24d.png
[20191026105515448.png]: /images/20230531/5126843598fe42109241bd606523a2ff.png
[20191108152846589.png]: /images/20230531/30f3bc9637ef4eef8148a554f1afd06b.png
[20200417151800445.png]: /images/20230531/04f4c755ee1444efaaa9ea222af104cf.png