错误处理

在这一节中，我们将看到如何在前面的例子中处理故障案例。我们假设远程读取因为某些原因失败了，API 函数 Api.fetch 返回一个被拒绝（rejected）的 Promise。

我们希望通过在 Saga 中发起 PRODUCTS_REQUEST_FAILED action 到 Store 来处理那些错误。

我们可以使用熟悉的 try/catch 语法在 Saga 中捕获错误。

  1. import Api from './path/to/api'
  2. import { call, put } from 'redux-saga/effects'
  4. // ...
  6. function* fetchProducts() {
  7.   try {
  8.     const products = yield call(Api.fetch, '/products')
  9.     yield put({ type: 'PRODUCTS_RECEIVED', products })
  10.   }
  11.   catch(error) {
  12.     yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
  13.   }
  14. }

为了测试故障案例，我们将使用 Generator 的 throw 方法。

  1. import { call, put } from 'redux-saga/effects'
  2. import Api from '...'
  4. const iterator = fetchProducts()
  6. // 期望一个 call 指令
  7. assert.deepEqual(
  8.   iterator.next().value,
  9.   call(Api.fetch, '/products'),
  10.   "fetchProducts should yield an Effect call(Api.fetch, './products')"
  11. )
  13. // 创建一个模拟的 error 对象
  14. const error = {}
  16. // 期望一个 dispatch 指令
  17. assert.deepEqual(
  18.   iterator.throw(error).value,
  19.   put({ type: 'PRODUCTS_REQUEST_FAILED', error }),
  20.   "fetchProducts should yield an Effect put({ type: 'PRODUCTS_REQUEST_FAILED', error })"
  21. )

在这个案例中，我们传递一个模拟的 error 对象给 throw，这会引发 Generator 中断当前的执行流并执行捕获区块（catch block）。

当然了，你并不一定得在 try/catch 区块中处理错误，你也可以让你的 API 服务返回一个正常的含有错误标识的值。例如， 你可以捕捉 Promise 的拒绝操作，并将它们映射到一个错误字段对象。

  1. import Api from './path/to/api'
  2. import { call, put } from 'redux-saga/effects'
  4. function fetchProductsApi() {
  5.   return Api.fetch('/products')
  6.     .then(response => ({ response }))
  7.     .catch(error => ({ error }))
  8. }
  10. function* fetchProducts() {
  11.   const { response, error } = yield call(fetchProductsApi)
  12.   if (response)
  13.     yield put({ type: 'PRODUCTS_RECEIVED', products: response })
  14.   else
  15.     yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
  16. }