Promises 实现中断

Promises 实现中断

• Promise 是一种异步解决方案, 但是一旦开启就无法停止, 在一些场景下可能需要用到中断异步任务的功能

实现思路

1. 封装一个函数, 创建一个新的 Promise 对象
2. 将其中的 reject 方法保留出来
3. 接收一个要执行异步任务的 Promise 对象
4. 利用 race() 方法让两个 Promise 对象赛跑
5. 将保留的 reject 方法设置到 race() 的结果 Promise 对象上
6. 将结果 Promise 对象返回
7. 如果需要手动终止 Promise, 只需要调用返回值的 abort() 方法即可

<template>
  <div>
    <el-button @click="req && req.abort('别想拿结果!')">Click Me</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',

  data () {
    return {
      result: '',
      req: null
    }
  },
  created () {
    const request = new Promise((resolve, reject) => {
      // 模拟服务器请求, 随机 0 ~ 3 秒之间返回数据
      setTimeout(() => {
        resolve('收到服务端数据')
      }, Math.random() * 3000)
    })
    this.req = this.abortWrapper(request)
    this.req.then(res => {
      console.log('成功的结果:', res)
      this.result = res
    }).catch(e => console.log('失败的结果:', e))
  },
  methods: {
    abortWrapper (p1) {
      let abort
      const p2 = new Promise((resolve, reject) => (abort = reject))
      const p = Promise.race([p1, p2])
      p.abort = abort
      return p
    }
  }
}
</script>

总结

• 灵活运用 race 来变相实现 Promise 的中断