js - Promise

1 promise的定义

• promise 是javascript中用来处理异步编程的方案, 可以理解为一个函数或者对象;

image.png

从输出结果中可以看出 Promise是一个构造函数, 有all, race, reject, resolve等方法, 原型链prototype中有catch,then等方法; 所以每次new Promise() 实例时都可以调用then,catch等方法;

2 promise的优缺点

• 优点:

1 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数;
2 promise 对象提供统一的接口，使得控制异步操作更加容易;

• 缺点:

1 无法取消 Promise，一旦新建它就会立即执行，无法中途取消;
2 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部;
3 当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成)

3 promise的状态

• pending: 初始状态, 不是成功或者失败状态
• fulfilled: 操作成功完成;
• rejected: 操作失败;

4 promise 的常用方法

• resovle & reject

<template>
  <div class="promise-con">
    <button @click="triggerPromise">promise</button>
  </div>
</template>
<script>
export default {
  name: 'Promise',
  methods: {
    getNumber() {
      let pro = new Promise((resolve, reject) => {
        // 异步操作
        setTimeout(() => {
          let num = Math.ceil(Math.random() * 10); // 生成1-10的随机数;
          if(num < 5) {
            resolve(num)
          } else {
            reject ('数字太大了')
          }
        }, 500)
      })
      return pro;
    },
    triggerReject() {
      this.getNumber().then(res => {
        console.log('resolve: ', res);
      }).catch(error => {
        console.log('error: ', error);
      })
    },
  }
}
</script>

输出小于5的数字或者string '数字太大了';

Promise实例中可以传入两个回调函数用于处理成功和失败的情况;resolve: 成功, reject:失败; getNumber方法返回的是一个promise实例,每个promise实例都会存在then()方法,用于处理成功的回调;catch()方法用于捕获错误;

• Promise.all() 方法

具有并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调;

   allfunc1() {
      return new Promise((resolve, reject) => {
        setInterval(() => {
          const res =  {
            name: 'allFunc1',
            data: 1,
          }
          resolve(res)
        }, 100)
      })
    },
    allfunc2() {
      return new Promise((resolve, reject) => {
        setInterval(() => {
          let res =  {
            name: 'allfunc2',
            data: 2,
          }
          resolve(res);
        }, 200)
      })
    },
    allfunc3() {
      return new Promise((resolve, reject) => {
        setInterval(() => {
          const res =  {
            name: 'allFunc3',
            data: 3,
          }
          resolve(res)
        }, 100)
      })
    },
    trigerAll() {
      // 此处传递的是一个数组;
      Promise.all([this.allfunc1(), this.allfunc2(), this.allfunc3()]).then(res => {
        console.log('res: ', res);
      }).catch(error => {
        console.log('error:', error);
      })
    },

// 会等到所有的异步请求都有了返回值之后才会输出结果;
[{name: 'allFunc1', data: 1},{name: 'allfunc2', data: 2},{name: 'allfunc3', data: 3}] 

• Promise.race()方法

race()方法表示的是当有结果返回时, 就会输出结果,不用等到所有;

 trigerRace() {
      // 调用的方法同上;
      Promise.race([this.allfunc1(), this.allfunc2(), this.allfunc3()]).then(res => {
        console.log(res);
      }).catch(error => {
        console.log(error);
      })
    },
// 输出结果
{name: 'allFunc1', data: 1}

参考
Promise/A+