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的
      };
     },
  },
}

使用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