【小程序taro 最佳实践】异步action优雅实践(简化流程)

给大家提供思路，可以借鉴哈，有什么问题可以留言taro脚手架后面文章会慢慢讲解更多技巧https://github.com/wsdo/taro-…概要当我们拿到官方项目请求action的时候需要写两个函数(一个返回type,一个dispatch)，超级麻烦，如下所示。function articleList(data) { return { type: LIST, payload: data }}export function list() { console.log(’list’) return (dispatch) => { Taro.request({ url: ‘http://api.shudong.wang/v1/article/list', data: { foo: ‘foo’, bar: 10 }, header: { ‘content-type’: ‘application/json’ } }).then((res) => { dispatch(articleList(res.data.article)) // 需要在另一个函数 dispatch }) }}如果每个函数都这样写下去，会极其痛苦的，很多冗余的代码，那么我们应该怎么设计呢？设计参数:type类型，函数（自动dispatch）这样设计后我们可以极其简单的使用action了/** * 创建API Action * * @export * @param actionType Action类型 * @param [func] 请求API方法，返回Promise * @returns 请求之前dispatch { type: ${actionType}_request } * 请求成功dispatch { type: ${actionType}, payload: ${resolveData} } * 请求失败dispatch { type: ${actionType}_failure, payload: ${rejectData} } */export function createApiAction(actionType, func = () => {}) { return ( params = {}, callback = { success: () => {}, failed: () => {} }, customActionType = actionType, ) => async (dispatch) => { try { dispatch({ type: ${customActionType }_request, params }); const data = await func(params); dispatch({ type: customActionType, params, payload: data }); callback.success && callback.success({ payload: data }) return data } catch (e) { dispatch({ type: ${customActionType }_failure, params, payload: e }) callback.failed && callback.failed({ payload: e }) } }}极简使用方式配合上篇文章讲的封装的 api 异步action就变得如此简单了import { createApiAction } from ‘./index’export const list = createApiAction(LIST, params => api.get(’news/list’, params))全部代码如果能帮到你帮忙点个 starhttps://github.com/wsdo/taro-…