DvaJS的Effect使用介绍

很多朋友使用dvajs不知道这个Effect是用来干嘛的，今天我们就一起来使用一下：

示例：

app.model({
	namespace: 'todos',
	effects: {
		*addRemote({ payload: todo }, { put, call }) {
			yield call(addTodo, todo);
			yield put({ type: 'add', payload: todo });
		},
	},
});

小重点来了，请认真看~

Effects

put
用于触发action

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

call
用于调用异步逻辑，支持Promise。

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

这个call与JS的call用法大概一致，这个call的第一个参数是你要调用的函数，第二个参数开始是你要传递的参数，可一 一传递。

select
用于从state里获取数据。

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

牢记以上三个小东东，你就掌握了effect的精髓了~

---

拓展：

错误处理

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

const app = dva({
	onError(e, dispatch) {
		console.log(e.message);
	},
});

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

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

关于JS的try catch的详细用法请看：JavaScript中try{}catch{}finally的使用

app.model({
	effects: {
		*addRemote() {
			try {
				// Your Code Here
			} catch(e) {
				console.log(e.message);
			}
		},
	},
});

接下来我们尝试将异步请求加入中间件，当返回错误时，我们统一到onError hook里进行处理。

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

GET 和 POST

import request from '../utils/request';

// GET
request('/api/todos');

// POST
request('/api/todos', {
	method: 'POST',
	body: JSON.stringify({ a: 1 }),
});

统一错误处理
假如我们与后端约定当请求出现错误时返回以下格式：

{
	status: 'error',
	message: '',
}

那么我们就编辑utils/request.js，加入以下中间件：

function parseErrorMessage({ data }) {
	const { status, message } = data;
	if (status === 'error') {
		throw new Error(message);
	}
	return { data };
}

这样我们就完成了错误的统一处理~

标签：DvaJS,request,Effect,介绍,call,effects,message,todos,yield
来源： https://blog.51cto.com/u_15275953/2924453