从 generator 函数到 redux -saga （六）

最新推荐文章于 2025-02-08 16:53:52 发布

原创最新推荐文章于 2025-02-08 16:53:52 发布 · 440 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript 同时被 3 个专栏收录

12 篇文章

订阅专栏

react

10 篇文章

订阅专栏

redux

7 篇文章

订阅专栏

本文探讨了在Redux-Saga中如何利用'call'实现任务的并行执行，以及通过'race'进行超时处理的方法。通过具体代码示例，展示了如何在规定时间内完成API调用，若超时则触发错误处理。

同时执行多个任务

import { call } from 'redux-saga/effects'

// effects 将会同步执行
const [users, repos] = yield [
  call(fetch, '/users'),
  call(fetch, '/repos')
]

saga中的超时处理

import { race, call, put } from 'redux-saga/effects'
import { delay } from 'redux-saga'

function* fetchPostsWithTimeout() {
  const {posts, timeout} = yield race({
    posts: call(fetchApi, '/posts'),
    timeout: call(delay, 1000)
  })

  if (posts)
    put({type: 'POSTS_RECEIVED', posts})
  else
    put({type: 'TIMEOUT_ERROR'})
}

race 的另一个有用的功能是，它会自动取消那些失败的 Effects。

import { race, take, call } from 'redux-saga/effects'

function* backgroundTask() {
  while (true) { ... }
}

function* watchStartBackgroundTask() {
  while (true) {
    yield take('START_BACKGROUND_TASK')
    yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')
    })
  }
}