Promise理解

Promise是一个构造函数,里面有三种状态peading，fulfilled,reject也就是等待,成功,失败这三个状态。

1.等待状态

  const p1 = new Promise((resolve, reject) => {
    // 成功的时候 可以调用 resolve()方法 
    // 失败的时候 可以调用 reject()方法
  })
  console.log(p1)

可以看出在里面什么都没有干,此时就是一个等待的Promise状态。

2.成功的状态

const p1 = new Promise((resolve, reject) => {
    resolve('成功状态')
  }).then(res => alert(res))

view1:

view2:

解析在这个过程发生了什么事值得深究。

1.调用了resolve()这个方法,并且传递参数,被then方法捕获

2.同理调用reject()这个方法,会被catch捕获。

3.失败的状态

const p1 = new Promise((resolve, reject) => {
    reject('失败状态')
  })
  console.log(p1);

view

 捕获错误的方法是调用了原型链条上的catch方法。

  const p1 = new Promise((resolve, reject) => {
    reject('失败状态')
  }).catch(err => console.log(err))

4.应用在接口上

Promise是一种很好的异步编程的一种解决方案。

先看一下如果不用Promise会是一种什么状态呢?

比如我要发送三个请求

{请求1{请求2{请求3}}}

这就是所谓的:回调地狱。

多层函数嵌套,让人看的眼花,我们想要的是:

请求1

请求2

请求3

用promise解决问题

 let a1 = new Promise((resolve, reject) => {
    resolve('吃饭')
  }).then(res => {
    alert(res)
    return new Promise((resolve, reject) => {
      resolve('睡觉')
    })
  }).then(res => {
    alert(res)
    return new Promise((resolve, reject) => {
      resolve('打豆豆')
    })
  }).then(res => alert(res))

这种调用的方式是不是看起来更加清晰明了。

5.es7的async和await对代码进行改造

1.声明一点 用async修饰的函数是一个Promise对象。

代码：

   async function eat() {
    console.log('吃饭');
  }
  console.log(eat())

打印的结果:

 2.改造上面代码的结果

 // 1.吃饭
  async function eat() {
    return '吃饭'
  }

  // 2.睡觉
  async function shleep() {
    return '睡觉'
  }
  // 3.打豆豆
  async function dadoudou() {
    return '打豆豆'
  }
  async function fn() {
    const res = await eat()
    alert(res)
    const res1 = await shleep()
    alert(res1)
    const res2 = await dadoudou()
    alert(res2)
  }
  fn()

输出的结果和上面的任然是一致的,但是更加的简化。

6.Promise.race

这是Promise的一个api，赛跑机制。

代码：

 const a1 =
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(20)
      }, 2000);
    })
  const a2 =
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(100)
      }, 1000);
    })
  const a3 =
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(30)
      }, 3000);
    })


  const p1 = Promise.race([a1, a2, a3]).then(res => alert(res))

谁用的时间最短就执行谁。

结果肯定执行100。

中途有reject也是一样的。

 const a1 =
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(20)
      }, 2000);
    })
  const a2 =
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(100)
      }, 1000);
    })
  const a3 =
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(30)
      }, 3000);
    })


  const p1 = Promise.race([a1, a2, a3]).then(res => alert(res), err => alert(err))

7.Promise.all

相比于赛跑机制这个是一起去执行的。

  const a1 = Promise.resolve(10)
  const a2 = Promise.resolve(20)
  const a3 = Promise.reject(30)
  const p1 = Promise.all([a1, a2, a3]).then(res => console.log(res), err => console.log(err))

用[]包裹起来,  等里面的执行完毕在拿到相应的实例。

如果中途有错误会立马进行停止。

这个可以在发送多个异步请求的时候使用。发送前有个loading加载的效果。

等异步发送完毕后加载结束。

注意这个和异步的时间没有关系,和包裹的循序有关系。

  const a1 = Promise.resolve(10)
  const a2 = Promise.resolve(20)
  const a3 = Promise.resolve(30)
  const p1 = Promise.all([a2, a1, a3]).then(res => console.log(res), err => console.log(err))

输出[20,10,30]。

8.中断一个Promise

代码：

 new Promise((resolve, reject) => {
    resolve(2)
  }).then(res => {
    // 中断
    throw new Promise((resolve, reject) => {

    })
    return new Promise((resolve, reject) => {
      resolve(3)
    })
  }).then(res => console.log(res))

抛出一个等待的Promise状态即可。

9.Promise为什么能链式调用

解析：then 返回的一定是一个新的Promise实例

 const a1 = new Promise((resolve, reject) => {
    resolve(2)
  })
  const a2 = a1.then(res => console.log(res))
  console.log(a2);

可以看出返回的任然是一个Promise对象,只不过状态是peading状态。

  const a1 = new Promise((resolve, reject) => {
    resolve(2)
  }).then(res => {
    console.log(res);
    return Promise.resolve(200)
  }).then(res => console.log(res))

将里面的Promise状态改成成功，还是可以进行链式调用。这就是Promise链式调用的原理。

10.关于Primise状态的判断

快速创建一个Promise成功对象。

代码：

 const a1 = Promise.resolve(100)
  console.log(a1);

 快速创建一个Promise失败对象。

代码：

 const a1 = Promise.reject(100)
  console.log(a1);

view:

 

当返回一个普通的值的时候。

  async function fn() {
    return 123
  }
  const a1 = fn()
  console.log(a1);

view视图

 

用async修饰的函数是一个promise对象 返回一个值就是成功的状态。

关于Promise就说这么多了,持续更新中,点个赞呗。