react dva发送请求详解（转）

1，在jsx页面派发任务，可以在componentWillMount的生命周期内，
使用this.props.dispatch方法派发，需要先引用connect模块，不引用会报错

import { connect } from 'dva';

在类中操作：

class 类名 extends React.Component {
  constructor(props){
    super(props)
  }
  componentWillMount() {
    this.props.dispatch({
      type: '自定义的namespace/effects中的方法名',
      payload: {//可以不填
        参数名：参数值
      },
    })
  }
  render() {
  //查看网络请求传递出来的内容
  console.log(this.props.data)
  //this.props.data为mapStateToProps中的data
    return (
      <div></div>
    )
  }
}

const mapStateToProps = (state) => {  //见名知意，把state转换为props
  //可以打印state看看数据结构，然后放到data里
  return {
    data：state.data
  };
};
export default connect(mapStateToProps)(类名)

2，services文件夹下创建单独的发送网络请求js，比如service.js

import request from '../utils/request';

export function models中要调用的方法名 (参数) {
  return request(`接口地址?${参数}`) //get方法请求
    /*
   return request(`接口地址`,{
    method: 'post',
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    },
    body: JSON.stringify({
      参数名：参数
    })
  })
  */
  
}

3，models文件夹下创建操作数据的js，比如data.js

import * as 自定义名 from '../services/service';

export default {
  namespace: '第一步中的namespace',

  state: {
    data: ''   //reducers中接收数据
  },

  subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
    },
  },

  effects: {

    *供组件调用的方法名({ payload: { 参数 }}, { call, put }) {

      const result = yield call(自定义名.service中的方法名, 参数);//如果使用  {参数}  ，则是一个对象

      //把请求的数据保存起来
      //数据更新会带动页面重新渲染
      yield put({
        type: 'save',  //reducers中的方法名
        payload:{
          data: result.data  //网络返回的要保留的数据
        }
      })
    }
  },

  reducers: {
     save(state, { payload: { data } }) {
       return {
         ...state, 
          data: data  //第一个data是state的，第二个data是payload的
      };
     },
  },
}

effects函数中参数详解
1）yield：固定关键词，Generator函数自带的关键字，与*搭配使用，有yield说明这里是异步，需要等后边的代码执行完成
2）payload：view端通过dispatch传过来的payload同名参数
3）select：拿到model中state的数据，
如：拿到state中commodityData中的list
const list = yield select(state=>state.commodityData.list)
4)call:第一个参数是异步函数，payload是参数，可以通过call来执行一个完整的异步请求，又因为yield的存在，就实现了异步转同步的方案
const res= yield call(pageQuery,payload)
5)put:就是通过reducers更改state中的数据，并更新到页面上

 

使用data.js可以在主js中：

import dva from 'dva';
const app = dva();
app.model(require('./models/data'));

第二步中引用的request.js⬇️，不需要改动

import fetch from 'dva/fetch';

function parseJSON(response) {
  return response.json();
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data => ({ data }))
    .catch(err => ({ err }));
}

参考:https://www.jianshu.com/p/6482f4785929

https://www.jianshu.com/p/5aa95d62339c

https://blog.csdn.net/hzxOnlineOk/article/details/102930679