DVA怎么调接口(React+dva+antd)

首先自己搭好dva+antd的环境哈~

1.环境搭好后会自动生成一个utils/request.js拦截器，可自行设置全局统一接口，
或者根据不同环境设置多个接口：

import axios from 'axios';


// 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;
}
// 设置全局参数，如响应超市时间，请求前缀等。
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'https://www.easy-mock.com/';   //设置全局统一接口地址
axios.defaults.withCredentials = true;

/**
 * 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) {
  options = { 
     method: 'POST',
     headers:{
         adminToken:"1234"   //统一设置token
     }
    }; //把默认get请求改成post请求
  return axios(url, options)
    .then(checkStatus)
    // .then(parseJSON)
    .then(data => ({ data }))
    .catch(err => ({ err }));
}

2.在根目录index.js里注册modal

// 3. Model
app.model(require('./models/example').default);

3.连接组件和Modal，比如你的组件叫Example，modal的namespace叫example
connect组件和modal之后在组件里可以使用this.props.dispatch发起请求

 handleClick=()=>{
    this.props.dispatch({   //若发起失败请打印this.props,看是否有dispatch属性，没有代表connect没有连接上
      type:"example/fetch",  //发请求到namespace为example文件下的fetch函数
      payload:''
    })
    console.log(this.props.ceshi)    //参考4的state
  }
  render() {
    return (
      

        按钮
      
    );
  }
}
const example = state => ({   //connect组件和Modal
  ceshi: state.example.auth,   //参考4的state
});
export default connect(example)(Example);

4.modal如下：

import { message } from 'antd';
import * as Exam from '../services/example';

export default {

  namespace: 'example',

  state: {
    auth: localStorage.getItem("token")
    ? JSON.parse(localStorage.getItem("token"))
    : "",
  },

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

  effects: {
    *fetch({ payload, callback }, { call, put }) {
      try {
        const {data} = yield call(Exam.getGuideListVO,payload);  //调用接口地址为Exam/getGuideListVO函数
        localStorage.setItem("token", JSON.stringify(data.data.data));
        yield put({ type: "getListSuccess",payload:data.data.data})
        if (callback) {
          callback(data.data || {});
        }
      } catch (e) {
        message.error(e.message);
      }
    },
  },

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

5.Exam文件如下：

import request from '../utils/request';  //引入拦截器

export function getGuideListVO() {
  return request('mock/5cdd764ffd487e51be5eb0d2/example/items'); //接口地址
}

以上就是dva的简单交互，希望可以帮助新手！大佬勿喷，我也是枚新手~