004-ant design -dispatch、request、fetch

一、dispatch 函數

typedispatch = (a: Action) => Action

dispatching function 是一個用於觸發 action 的函數，action 是改變 State 的唯一途徑，但是它只描述了一個行為，而 dipatch 可以看作是觸發這個行為的方式，而 Reducer 則是描述如何改變數據的。

在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，可以調用 Model 中的 Reducer 或者Effects，常見的形式如：

dispatch({

  type:'user/add', // 如果在 model 外調用，需要添加 namespace

  payload: {}, // 需要傳遞的信息

});

二、頁面過程梳理

頁面→dispatch→model→service

在頁面的生命周期中使用this.props，可以獲取到dispatch。這里dispatch通常調用models模型。

頁面的調用

    const { dispatch } = this.props;
    dispatch({
      type: 'xxModel/fetch',
      payload: { ...params },
    });

model調用

import {  queryList,} from '@/services/xxServiceApi';

export default {
  namespace: 'xxModel',

  state: {
    data: {
      list: [],
      pagination: {},
    },
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      const response = yield call(queryList, payload);
      yield put({
        type: 'serverHandler',
        payload: { data:response.data },
      });
    },
  },

  reducers: {
    serverHandler(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

service調用【在services文件夾下，xxServiceApi.js】

import request from '@/utils/request';

export async function queryList() {
  return request('/api/xxServiceApi');
}

三、其他處調用ajax請求

1、原生或者jquery工具類

2、調用service方法

如上述service如何使用

import { queryCurrent } from '@/services/xxServiceApi';


export function getXXData() {
    let userService = queryCurrent().then(p => {
        console.log('data',p)
   } 
}

因為默認request同，dva的fetch一樣返回的都是promise

這個可以直接使用then處理即可