Promise详解

发布于 2021-02-28  156 次阅读 本文共2812个字


关于Promise大家应该多多少少都有所了解了,Promise的出现,真的帮助我们解决了很多问题,比如典型的“回调地狱”问题,下边我们来详细解说:

异步回调

1 、回调地狱

在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱。如图:

2、并行结果

如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务,无法实现并行节约时间。

基于上边异步回调产生的问题,就诞生了Promise。

Promise

在阮一峰的《ES6标准入门》第16章Promise对象中他解释到:Promise,就是一个对象,用来传递异步操作的消息。

1、Promise的三种状态

  • Pending——Promise对象实例创建时候的初始状态
  • Fulfilled——成功时候的状态
  • Rejected——失败时候的状态

then 方法就是用来指定Promise对象的状态改变时确定执行的操作,resolve时执行第一个函数(onFulfilled),reject时执行第二个函数(onRejected)

2、构造一个Promise

2.1 使用Promise

let promise = new Promise(resolve, reject) = {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve('This is resolve!');
    } else {
      reject('This is reject!');
    };
  });
};
promise.then(Fulfilled, Rejected);
  • 构造一个Promise实例需要给Promise构造函数传入一个函数。
  • 传入的函数需要有另个形参,两个形参都是function类型的参数。
    • 第一个形参运行后会让Promise实例处于resolve状态,所以我们一般给第一个形参命名为resolve,使Promise对象的状态改变成成功,同时传递一个参数用于后续成功后的操作。
    • 第二个形参运行后会让Promise实例处于reject状态,所以我们一般给第二个形参命名为reject,将Promise对象的状态改变为失败,同时将错误的信息传递到后续错误处理的操作。

模拟Promise

ES5模拟Promise

function Primise(fn) {
  fn((data) => {
    this.success(data);
  }, (error) => {
    this.error();
  })
}

Promise.prototype.resolve = function(data) {
  this.success(data)
}

Promise.prototype.rejece = function(error) {
  this.error(error);
}

Promise.prototype.then = function(success, error) {
  this.success = success;
  this.error = error;
}

ES6模拟Promise

class Promise {
  constructor(fn) {
    fn((data) => {
      this.success(data);
    }, (error) => {
      this.error();
    });
  }

  resolve(data) {
    this.success(data);
  }

  reject(error) {
    this.error(error);
  }

  then(success, error) {
    this.success = success;
    this.error = error;
  }
}

Promise 作为函数的返回值

function ajaxPromise(queryUrl) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', queryUrl, true);
    xhr.send(null);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.responseText);
        }
      }
    }
  });
}

ajaxPromise('http://www.baidu.com').then((data) => {
  console.log(data)
}, (error) => {
  console.error(error)
})

Promise的链式调用

  • 每次调用返回的都是一个新的Promise实例
  • 链式调用的参数通过返回值传递

then可以使用链式调用的写法的原因在于:每一次执行该方法总是会返回一个Promise对象

readFile('test.txt').then(function(data) {
  return data
}).then(function(data) {
  return readFile(data);
}).then(function(data) {
  console.log(data)
}).catch(function(error) {
  console.log(error)
})

Promise API

Promise.all

参数:接收一个数组,数组内都是Promise实例

返回值:返回一个Promise实例,这个Promise实例的状态转移取决于参数Promise实例的状态变化。当参数中所有的实例都处于resolve状态时,返归的Promise会变成resolve状态。如果参数中任意一个实例处于reject状态,返回的Promise实例变为reject状态。

Promise.all([p1, p2]).then(function(result) {
  console.log(result)
})

不管两个promise谁先完成,Promise.all方法都会按照数组里边的顺序将结果返回。

Promise.race

参数:接收一个数组,数组内都是Promise实例

返回值:返回一个Promise实例,这个Promise实例的状态转移取决于参数的Promise实例的状态变化。当参数中任何一个实例处于resolve状态时,返归的Promise实例会变成resolve状态。如果参数中任意一个实例处于reject状态,返回的Promise实例变为reject状态。

Promise.race([p1,p2]).then(function(resule) {
  console.log(resule)
});

Promise.resolve

返回一个Promise实例,这个实例处于resolve状态。

根据传入参数不同有不同的功能:

值(对象、数组、字符串等):作为resolve传递出去的值

Promise实例:原封不动返回

Promise.reject

返回一个Promise实例,这个实例处于reject状态。

参数一般就是抛出的错误信息


努力,只为遇见更好的自己!