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

最新推荐文章于 2024-12-03 11:05:47 发布

转载最新推荐文章于 2024-12-03 11:05:47 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bac556a5188255c72285018

文章标签：

#后端 #javascript #ViewUI

本文介绍了一种简化Taro项目中action调用的方法，通过设计一个通用的APIAction，减少代码冗余，使action调用更加简洁高效。文章详细展示了如何创建和使用这个APIAction，以及它如何自动处理dispatch，请求前、成功和失败的状态。

给大家提供思路，可以借鉴哈，有什么问题可以留言 taro脚手架后面文章会慢慢讲解更多技巧 github.com/wsdo/taro-k…

概要

当我们拿到官方项目请求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))
复制代码

全部代码

如果能帮到你帮忙点个 star github.com/wsdo/taro-k…

转载于:https://juejin.im/post/5bac556a5188255c72285018