react使用dva对数据做GET或POST请求

react使用dva对数据做GET或POST请求

首先在组件页面 index.js 中添加

componentDidMount(){
const { dispatch } =this.props;
dispatch({
	//type里的menu是models/menus.js里面的命名空间namespace的menu
	type:'menu/fetchMenus',   
	payload:{},   
	callback:res=>{
		console.log(res,111);
},
}); 
};

//接下来在models/menus.js (意思是在models文件下创建一个model的组件)

import * as API from '../services/api';

export default {
  namespace:'menu',

  state:{
    menu:[],
  },

  effects:{
  //fetchMenus给到services/apis/menus.js的
    *fetchMenus({callback},{call ,put}){
      const response =yield call(API.fetchMenus);
      yield put({
      //public是写在下面reducers里,携带的参数是固定的(也就是修改数据)
        type:'public',
        payload:{...response, name:'menu'},
      });
      if(response.code===0){
        if(callback) callback(response.data);
      }
    },
  },

  reducers:{
    public(state, action){
      return{
        ...state,
        [action.payload.name]:action.payload.data,
      }
    },
    clearData(){
      return{
        menu:[],
      }
    },
  },
}

然后在services/apis/menus.js(意思是在services/apis文件下再创建一个menus.js)

// 模拟  GET请求
import { v1, checkCode } from '../config';
import request from '../../utils/request';

export async function fetchMenus() {
  const response = request(`${v1}/users/821/menus`);
  return checkCode(response);
};



//模拟  POST请求
//
import { v1, checkCode } from '../config';
import request from '../../utils/request';
import { getUserId } from '../../utils/token';


// 只有这里发生变化，在后面有传值
export async function Banksd(params) {
  const id = getUserId();
  const response =request(`${v1}/users/${id}/current`,{
    mtehod:'POST',
    body:params,
  })

    return checkCode(response);
}

接下来在services/api.js去请求apis下创建接口组件的路径

export * from './apis/menus';

最后在路由 common/router.js 里对应的组件页面路由写入模块组件名

 '/wechat/department': {
      identity: 'common',
      //['menus']就是models下的menu
      component: dynamicWrapper(app, ['menus'], () => import('../routes/Wechat/Department')),
    },

结果如下

最后

以上就是甜甜眼神为你收集整理的react使用dva对数据做GET或POST请求的全部内容，希望文章能够帮你解决react使用dva对数据做GET或POST请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。