ES6: promise(解决异步相关的问题)

 

所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理

首先我们可以来理解一下为什么会有异步处理:

  • 同步:比方说在飞机上乘务员为乘客发放午餐,乘务员会按照顺序依次向每一排乘客发放餐具,只有当给第一排乘客发放完才会轮到第二排,这种严格按照顺序的操作叫同步操作。

  • 异步:异步操作则是不按顺序进行,操作是否完成不会影响到整体的进度。这样可避免页面堵塞的情况。

promise主要作用:

  1. 解决回调地狱;

  1. 可将异步操作队列化,按照期望的顺序执行,返回符合预期的结果;

  2. 所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理

promise详解:

三个状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)

要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)
  • promis对象用于表示一个异步操作的最终完成或失败,及其结果值

  • promise对象三个状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)

  • resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

  • reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

  • resolve和reject实质均为回调函数,且只能被调用一次;

promise对象只能从 pending 变为 fulfilled,或 pending 变为 rejected,当处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。


状态缺点:

  • 一旦创建就无法停止;

  • 当promise处于pedding状态时,无法确定它是成功还是失败;

  • 如果不设置回调函数,promise内部的错误不会反应到外部;

  • 无法得知pending状态下的进展情况


.then()

1、接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败) 2、.then()返回一个新的Promise实例,所以它可以链式调用 3、当前面的Promise状态改变时,.then()根据其最终状态,选择特定的状态响应函数执行 4、状态响应函数可以返回新的promise,或其他值,不返回值也可以我们可以认为它返回了一个null; 5、如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行 6、如果返回其他任何值,则会立即执行下一级.then()

接下来看一段代码深刻理解其中的执行顺序:

.then 里的回调函数通过状态来执行相应的操作

const first = () =>
        new Promise((resolve, reject) => {
            console.log(3);
            let p = new Promise((resolve, reject) =>{
                console.log(7);
                setTimeout(() => {
                    console.log(5);
                    resolve(6);
                }, 0);
                resolve(1);
            });
            resolve(2);
            p.then(value => {
                console.log(value);
            });
            
        })
        first().then(arg => {
            console.log(arg);
        });
        console.log(4);

执行结果:

3 7 4 1 2 5
​
同步代码(最高)3 7 4
​
微任务异步代码(次高,then)1 2
​
宏任务异步代码(最低,setTimeout)5

.then多次调用的情况:

const p = new Promise(function(resolve,reject){
          resolve(1);
        }).then(function(value){ // 第一个then // 1
          console.log(value);
          return value * 2;
        }).then(function(value){ // 第二个then // 2
          console.log(value);
        }).then(function(value){ // 第三个then // undefined
          console.log(value);
          return Promise.resolve('resolve'); 
        }).then(function(value){ // 第四个then // resolve
          console.log(value);
          return Promise.reject('reject'); 
        }).then(function(value){ // 第五个then //reject:reject
          console.log('resolve:' + value);
        }, function(err) {
          console.log('reject:' + err);
        });

 

原文地址:https://www.cnblogs.com/Dylen24/p/13256135.html