dva取消异步任务


先声明一个axios的网络请求函数login🤪:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
//service.js
import axios from 'axios';

export default {
  login: async (params, cancelToken) => {
    try {
      const response = await axios.post(`${ApiServer}/auth/user`, params, cancelToken);
      return response;
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
      } else {
        message.error(error.message);
      }
    }
  },

这段代码可以处理3中情况的异常:

  • axios.interceptors.response中throw Error
  • http status code !== 200时的promise reject,不使用async时是在catch中处理
  • axios请求被代码cancel掉

有了网络请求,可以写saga函数了:

如果是在dva中,saga函数会被写在model中的effects对象中:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const CancelToken = axios.CancelToken;
...  
effects: {
    *startLogin({ payload }, { put, call, race }) {
      const source = CancelToken.source();
      const { data, timeout } = yield race({
        data: call(login, {username: payload.username,}, {cancelToken: source.token,}),
        timeout: call(delay, 1000),
      });
      if (data) {
        yield put({ type: 'log', payload: 'success' });
      } else {
        yield source.cancel('登录超时');
        yield put({ type: 'log', payload: 'timeout' });
      }
     },
   }

当然startLogin函数也可以写成generator函数作为普通saga,在不用dva的情况下使用。

这段代码调用了上面👆的login函数进行网络请求,其中race是saga提供的一种effect,是一种竞赛模式,race下面的多个任务,只有一个胜利者,即第一个完成的任务,其他任务会被取消。

所以这段代码就是用race实现的网络请求任务的超时处理。

但是网络请求任务只是一个saga任务一个异步任务,异步任务被取消了,但是网络请求并没有被取消,所以取消网络请求需要单独处理。

对于axios这个库来说,就是使用CancelToken这个api了。👆上面两段代码就是一个完整的CancelToken使用的例子。

上面说了什么呢?上文使用两段代码,介绍了一种——在使用dva或者redux-saga时——取消effect(取消异步任务、cancel effect、处理异步任务超时、处理网路请求超时、取消axios请求)的写法。下面介绍另一种写法。

除了用race以外,还可以用take Effect来写。比如:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 namespace: 'products',
 effects: {
  *start(){},
  *stop(){},
  watchLogin: [
      function* ({ take, put, call, cancel, fork, cancelled }) {
          yield take('start');
          const timerTask = yield fork(timer)
          const bgSyncTask = yield fork(bgSync)
          yield take('stop')
          yield cancel(bgSyncTask)
          yield cancel(timerTask)

        function* bgSync() {
          try {
            while (true) {
              const result = yield call(delay, 5 * 1000);
              yield put({ type: 'stop' })
            }
          } finally {
            if (yield cancelled())
              yield put({ type: 'log', payload: 'fetch🛑' })
          }
        }
        function* timer(time) {
          let i=0;
          while (true) {
            yield put({ type: 'log', payload: i++ })
            yield delay(1000)
          }
        }
      },
      { type: 'watcher' },
    ],
}

多说一句,这段代码还是在dva中的写法,它也可以被轻易的改成redux-saga的写法。

watchLogin是一个saga,它被dva自动run运行,它的第一个take在等待一个type为start的action被dispatch或者put,take(‘start’)被触发后,2个非阻塞任务运行,同时等待take(‘stop’)被触发。

action stop触发take(‘stop’),下面2行代码执行,取消了2个非阻塞任务🤪。

我们看到fork的2个任务都是generator函数,也就是saga,它们可以写在dva的model的effects下,被disptach或者put发送action调用触发,如果这样的话就无法通过代码将其cancel。

所以为了实现取消异步任务,可以像这样写在一个effect中,通过take帮助,实现cancel。

其实dva中每个model的effects被看作一个大saga,会被当作sagaMiddleware.run()方法的参数,而effects下面的每个方法,都会被fork成一个子任务。

综上所述,现在我们可以处理一种问题了——在使用dva或者redux-saga时——取消effect、取消异步任务、cancel effect、处理异步任务超时、处理网路请求超时、取消axios请求。

updatedupdated2020-10-122020-10-12

keywords: cancel effect dva dva cancel effect dva effect超时 saga超时 取消axios 取消effect 取消saga 取消saga异步任务 取消异步任务 取消网络请求 超时