Effect

示例:

  1. app.model({
  2. namespace: 'todos',
  3. effects: {
  4. *addRemote({ payload: todo }, { put, call }) {
  5. yield call(addTodo, todo);
  6. yield put({ type: 'add', payload: todo });
  7. },
  8. },
  9. });

Effects

put

用于触发 action 。

  1. yield put({ type: 'todos/add', payload: 'Learn Dva' });

call

用于调用异步逻辑,支持 promise 。

  1. const result = yield call(fetch, '/todos');

select

用于从 state 里获取数据。

  1. const todos = yield select(state => state.todos);

错误处理

全局错误处理

dva 里,effects 和 subscriptions 的抛错全部会走 onError hook,所以可以在 onError 里统一处理错误。

  1. const app = dva({
  2. onError(e, dispatch) {
  3. console.log(e.message);
  4. },
  5. });

然后 effects 里的抛错和 reject 的 promise 就都会被捕获到了。

本地错误处理

如果需要对某些 effects 的错误进行特殊处理,需要在 effect 内部加 try catch

  1. app.model({
  2. effects: {
  3. *addRemote() {
  4. try {
  5. // Your Code Here
  6. } catch(e) {
  7. console.log(e.message);
  8. }
  9. },
  10. },
  11. });

异步请求

异步请求基于 whatwg-fetch,API 详见:https://github.com/github/fetch

GET 和 POST

  1. import request from '../util/request';
  2. // GET
  3. request('/api/todos');
  4. // POST
  5. request('/api/todos', {
  6. method: 'POST',
  7. body: JSON.stringify({ a: 1 }),
  8. });

统一错误处理

假如约定后台返回以下格式时,做统一的错误处理。

  1. {
  2. status: 'error',
  3. message: '',
  4. }

编辑 utils/request.js,加入以下中间件:

  1. function parseErrorMessage({ data }) {
  2. const { status, message } = data;
  3. if (status === 'error') {
  4. throw new Error(message);
  5. }
  6. return { data };
  7. }

然后,这类错误就会走到 onError hook 里。