其他分享
首页 > 其他分享> > DvaJS的Effect使用介绍

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