此篇文章续 Redux-Saga妈妈级教程（上），上一篇文章触发字数限制，所以开了《Redux-Saga妈妈级教程（下）》。

7，redux-saga提供的取消任务方法，任务并发方法以及任务竞赛方法（cancel，all，race）

cancel方法

前面说到cancel可以取消当前正在执行的任务，但它并不是那么粗暴，当某个任务呗cancel取消时，cancel会给当前被取消任务一个处理取消逻辑的机会，这个机会就是finally。

• 如下cancel方法代码示例：

  
  // 当前路径：src/LearningSaga/saga/index.js
  
  import { put, take, call, delay, fork, cancel, all, race } from 'redux-saga/effects'
  
  function* forkTask() {
      try {
          // 2.1，延迟2s控制台打印 'forkTask finished'
          yield delay(2000)
          console.log('forkTask finished');
      } catch (error) {
          // 2.2，如果出错则控制台打印 'error'
          console.log('error');
      } finally {
          // 2.3，forkTask不管以怎样形式结束都将执行finally区块内部内容
          console.log('当task以任意方式结束，不管是正常结束，抛错结束，还是当前任务取消结束，finnally都将执行');
      }
  
  }
  function* cancelFork() {
      // 2，cancelFork使用fork启动一个非阻塞的任务forkTask
      const task = yield fork(forkTask)
      // 3，延迟1s
      yield delay(1000)
      // 4，取消任务forkTask
      yield cancel(task)
  }
  
  function* rootSaga() {
      // 1，根saga启动cancelFork任务
      yield call(cancelFork)
  }
  
  export default rootSaga
  
  复制代码

  • 首先，根saga启动cancelFork任务

  • cancelFork任务启动后，首先使用fork启动一个非阻塞的任务forkTask，任务forkTask中将延迟2s后输出'forkTask finished'

  • 回到cancelFork任务中，由于yield fork(forkTask)是非阻塞的，所以继续执行下面代码，即 yield delay(1000)，阻塞cancelFork任务1s

  • 1s后，此时forkTask还没运行完毕（forkTask内部阻塞2s），cancelFork任务继续执行下一段代码 yield cancel(task)，取消forkTask任务

  • 此时forkTask任务被取消，而此时由于forkTask延迟2s的缘故，try中代码并未执行完毕，所以不会执行 console.log('forkTask finished');，但对于cancel而言，终止了forkTask，但还给forkTask提供了处理取消逻辑的地方，就是finally区块，所以finally区块中的 console.log('当task以任意方式结束，不管是正常结束，抛错结束，还是当前任务取消结束，finnally都将执行');将执行。

  • 所以，当我们使用cancel方法取消任务时，如果该任务还有一些取消逻辑，我们可以在finally中完成。

all方法

all方法其实前面有说过，类似Promise.all，为我们提供了任务并发的功能，当all参数中所有任务全部完成，all所在的Generator函数才会恢复执行。而如果参数中某个任务失败且该任务未对错误进行处理，那么错误将冒泡到all所在的Generator中，且取消其他任务。

而all可能是阻塞的也有可能是非阻塞的，这取决于all中创建Effect的形式，如果all参数中使用非阻塞的方法创建任务，那么all就不会阻塞all后面的代码，比如yield all (call(task1),fork(task2))，那么all就会被call(task1)阻塞，如果是yield all(fork(task1),fork(task2)) ，那么all就不会被阻塞。

• all方法代码示例如下，此处示例中task1中reject，但被task1中错误被catch所处理，所以视为完成，所以该代码演示的是all参数中任务全都完成的场景，具体代码分析按照注释标记顺序看。

  
  // 当前路径：src/LearningSaga/saga/index.js
  
  import { call, delay, all } from 'redux-saga/effects'
  
  function* task1() {
      try {
          // 1.1，这里yield一个失败的Promise，这相当于抛出一个内容为1000的错误
          yield Promise.reject('1000')
          // 1.2，控制台不会输出'task1'，因为1.1已经抛出一个错误，所以这段代码不会被执行
          console.log('task1');
      } catch (error) {
          // 1.3，catch捕获 yield Promise.reject('1000') 抛出的错误，所以这里控制台将输出 `task1_error, 1000`
          console.log('task1_error', error)
      } finally {
          // 1.4，task1因为抛错即将结束，结束之前都会执行finally区块中内容，所以控制台将输出'task1_finally'
          console.log('2：task1_finally');
          // 1.5，task1在finally中返回一个'task1 finished'字符串
          return 'task1 finished'
      }
  }
  function* task2() {
      try {
          // 1.6，task2任务延迟2s
          yield delay(2000)
          // 1.7，2s后控制台输出'task2'
          console.log('3：task2');
          // 1.8，task2返回字符串`task2 success`，但是后面finally区块中也有return语句，最终话return值以finally中return为准
          // 但console.log('`task2 success`');依然执行，只不过return结果替换成finally中的return结果
          return console.log('4：task2 success');
      } catch (error) {
          // 1.9，因为task2中没有出现抛错，所以catch不会执行，所以下面代码不会执行
          console.log('1，task2_error', error)
      } finally {
          // 1.91，task任务正常结束，执行finally区块，所以将输出'task2_finally'
          console.log('5：task2_finally');
          // 1.92，finally区块返回字符串'task2 finished'，因为finally中return权重大于catch中return
          // 所以最终返回值以finally区块中返回值为准
          return 'task2 finished'
      }
  
  }
  
  function* rootSaga() {
      // 1，根saga使用all并发启动阻塞任务task1与task2
      const res = yield all([call(task1), call(task2)])
      // 2，当all接受到结果时输出结果
      console.log('6：res:', res);
  }
  
  export default rootSaga
  
  
  复制代码

  • 下面是上面all代码示例控制台输出效果gif：

    

race方法

race方法类似于Promise.race，即race参数中多个任务竞赛，谁先完成，race就结束，这里也分两种情况：1，如果率先完成者正常完成，则取消其他未完成的任务，且完成任务结果时该任务return值，其他取消任务的结果均为undefined。 2，率先完成任务失败（抛错且未处理），则错误冒泡到race所在Generator函数中，且取消其他竞赛中的任务。

• race方法代码示例如下，此处示例中task1中reject，但被task1中错误catch所处理，所以视为完成，所以该代码演示的是race参数中任务全都完成的场景，具体代码分析按照注释标记顺序看。

  
  // 当前路径：src/LearningSaga/saga/index.js
  
  import { call, delay, race } from 'redux-saga/effects'
  
  function* task1() {
      try {
          // 1.1，这里yield一个失败的Promise，这相当于抛出一个内容为1000的错误
          yield Promise.reject('1000')
          // 1.2，控制台输出'task1'，因为1.1已经抛出一个错误，所以这段代码不会被执行
          console.log('task1');
      } catch (error) {
          // 1.3，catch捕获 yield Promise.reject('1000') 抛出的错误，所以这里控制台将输出 `task1_error, 1000`
          console.log('1：task1_error', error)
      } finally {
          // 1.4，task1因为抛错即将结束，结束之前都会执行finally区块中内容，所以控制台将输出'task1_finally'
          console.log('2：task1_finally');
          // 1.5，task1在finally中返回一个'task1 finished'字符串
          return 'task1 finished'
      }
  }
  function* task2() {
      try {
          // 1.6，task2任务延迟2s，因为这里是race，task1明显快于task2，所以task2任务将被取消
          // 所以在finally之前代码都不会执行
          yield delay(2000)
          console.log('task2');
      } catch (error) {
          console.log('task2_error', error)
      } finally {
          // 1.7，task2任务被取消，执行finally区块，所以将输出'task2_finally'
          console.log('3：task2_finally');
          // 1.8，因为task2任务被取消，其return结果不作为返回结果
          return 'task2 finished'
      }
  
  }
  
  function* rootSaga() {
      // 1，根saga使用race竞赛启动阻塞任务task1与task2
      const res = yield race([call(task1), call(task2)])
      // 2，当race接受到结果时输出结果，因为task2被取消，所以其结果都为undefined，不管有没有return
      // 所以输出结果将是： ["task1 finished", undefined]
      console.log('4：res:', res);
  }
  
  export default rootSaga
  
  复制代码

  • 下面是上面race代码示例控制台输出效果gif：

    

cancel all race方法详解

• cancel(…tasks)： cancel中参数tasks是可选的，如果传参，可以传入一个或多个task，像这样cancel(task)||cancel(task1,task2,...tasks) ，其中task是由fork指令返回的Task对象，用于取消这些task对应的fork分叉任务。其中如果期望在这些fork任务被取消时执行一些取消逻辑可以将这些取消逻辑放在finally区块中。

  • cancel如果没有接受到传参，像这样yield cancel()，将取消该代码所在的任务，即自取消，如下代码，cancelTask任务将被自取消。

    function* cancelTask() {
        try {
            // 1，取消当前任务cancelTask
            yield cancel()
            // 2，由于当前任务被取消，console.log('我还能被执行吗？');将不会执行
            console.log('我还能被执行吗？');
        } catch (error) {
            console.log('error,cancelTask');
        } finally {
            // 3，任务结束最后都会执行finally区块内代码，所以下面代码将执行
            console.log('我肯定可以被执行');
        }
    }
    复制代码

• race([…effects])： 创建一个Effect描述信息，命令中间件在多个任务间竞赛。且分两种情况：1，如果率先完成者正常完成，则取消其他未完成的任务，且完成任务结果时该任务return值，其他取消任务的结果均为undefined。 2，率先完成任务失败（抛错且未处理），则错误冒泡到race所在Generator函数中，且取消其他竞赛中的任务。 前面race演示的为率先完成的任务成功的场景，即情况1，下面演示率先完成任务失败场景（情况2），如下代码，分析过程参注释标记顺序，此处不做赘述。

  // 当前路径：src/LearningSaga/saga/index.js
  
  import { call, delay, all, race } from 'redux-saga/effects'
  
  function* task1() {
      // 1.1，这里yield一个失败的Promise，这相当于reject一个内容为1000的错误
      yield Promise.reject('1000')
      // 1.2，因为1.1已经reject一个错误，所以这段代码不会被执行，同时task1未对错误进行处理，错误将冒泡到父函数
      console.log('task1');
  }
  function* task2() {
      // 1.3，因为task1已经失败，且错误未处理，所以task2任务将取消，后面的 console.log('task2');不会被执行
      yield delay(2000)
      console.log('task2');
  }
  
  function* rootSaga() {
      try {
          // 1，根saga使用race竞赛启动阻塞任务task1与task2
          const res = yield race([call(task1), call(task2)])
          // 2，当race接受到结果时输出结果，但是由于task1中错误未被捕获，所以错误冒泡到rootSaga中，所以下面代码将不会执行
          console.log('6：res:', res);
      } catch (error) {
          // 3，rootSaga的catch捕获到task1，并输出结果
          console.log('1：task1冒泡到rootSaga中的错误，现在已经被rootSaga捕获');
      }
  
  }
  
  export default rootSaga
  
  复制代码

  • 上面代码控制台输出gif：

    

• race(effects)： 区别于race([…effects])，这里effects是个对象形式的effect集合。其参数形式与输出结果如下code。

  function* raceTask() {
      // 1,task1返回值1000 task2返回值2000 task3返回值3000 
      const res = yield race({
          task1: call(task1),
          task2: call(task2),
          task3: call(task2)
      })
      //
      // 2,其中task2率先完成，所以res结果将是 {task1:undefined,task2:2000,task3:undefined}
      console.log(res);
  }
  复制代码

• all([…effects]) ： 创建一个Effect信息，命令中间件并行地运行多个Effect，并等待他们全部完成，其中分为两种情况：1，all中任务全部完成，则all所在Generator恢复执行。 2，all中某个任务失败，则取消其他all中进行的任务，同时错误冒泡到all所在Generator中。

  • 前面all演示例子属于情况1，即all中所有任务全部完成，下面将以code演示情况2，代码如下，分析过程参注释标记顺序，此处不做赘述。

    // 当前路径：src/LearningSaga/saga/index.js
    
    import { call, delay, all } from 'redux-saga/effects'
    
    function* task1() {
        // 1.1，这里yield一个失败的Promise，这相当于reject一个内容为1000的错误
        yield Promise.reject('1000')
        // 1.2，因为1.1已经reject一个错误，所以这段代码不会被执行，同时task1未对错误进行处理，错误将冒泡到父函数
        console.log('task1');
    }
    function* task2() {
        try {
            // 1.3，因为task1已经失败，且错误未处理，所以task2任务将取消，try中代码将不会执行
            yield delay(2000)
            console.log('task2');
        } catch (error) {
    
        } finally {
            // 1.4，task2任务取消，执行finally，所以输出5：task2_finally
            console.log('1：task2_finally');
        }
    }
    
    function* rootSaga() {
        try {
            // 1，根saga使用all并发启动阻塞任务task1与task2
            const res = yield all([call(task1), call(task2)])
            // 2，当all接受到结果时输出结果，但是由于task1中错误未被捕获，所以错误冒泡到rootSaga中，所以下面代码将不会执行
            console.log('6：res:', res);
        } catch (error) {
            // 3，rootSaga的catch捕获到task1，并输出结果
            console.log('2：task1冒泡到rootSaga中的错误，现在已经被rootSaga捕获');
        }
    
    }
    
    export default rootSaga
    
    复制代码

  • 上面代码控制台输出gif：

    

• all(effects)： 区别于all([…effects])，这里effects是个对象形式的effect集合。其参数形式与输出结果如下code。

    function* allTask() {
      // 1,task1返回值1000 task2返回值2000 task3返回值3000 
      const res = yield all({
          task1: call(task1),
          task2: call(task2),
          task3: call(task2)
      })
      // 2,res结果将是 {task1:1000,task2:2000,task3:3000}
      console.log(res);
    }
  复制代码