takeLatest 如何接受 this.props.dispatch 传递的参数

最新推荐文章于 2022-12-15 07:55:43 发布

weixin_34061482

最新推荐文章于 2022-12-15 07:55:43 发布

阅读量3.9k

点赞数

文章标签： javascript ViewUI

本文介绍了一个基于前后端分离架构的月考核分系统的实现过程，包括了从前端获取查询参数到后端处理请求的具体步骤。文章详细展示了如何通过前端调用后端API获取月考核分数据，并使用saga中间件来管理异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.步骤一

// 获取查询参数
getQueryParams(params){
  // 请求月考核分的数据
  this.props.dispatch({
    type:'getMonthlyAssessmentScoreData', // action.type api
    payload: params
  })
}

2.步骤二

// 月考核分
function* monthlyAssessmentScoreSaga(){
  /**
   * takeLatest
   * 对于触发多个action的时候，只执行最后一个，其他的会自动取消
   */
  yield takeLatest('getMonthlyAssessmentScoreData',(params) => getMonthlyAssessmentScoreList(params))
}

3.步骤三

// 月考核分 请求
import { getMonthlyAssessmentScorelist } from '../services/api';
/**
 * 声明时需要添加*，普通函数内部不能使用yield关键字，否则会出错
 * 获取用户列表数据
 */
function* getMonthlyAssessmentScoreList(params){
  const response = yield call(() => getMonthlyAssessmentScorelist(params)); // 返回值
  // put -- 触发某个action， 作用和dispatch相同
  yield put({ // 考核一览数据
    type:'currentMonthlyAssessmentScoreList', // 触发 同步 monthlyAssessmentScore --> currentMonthlyAssessmentScoreList
    payload:response.data, // 后台获取的数据
  })

  yield put({ // 加载动画
    type:'listload',
    payload:false,
  })
}

4.步骤四

// 月考核分
export async function getMonthlyAssessmentScorelist(param){
  console.log(param);
  return axios.get('http://localhost:8000/monthlyAssessmentScoreList').then(function(response){
    // 接收 json-server 的返回值
    return response.data;
  })
}