Umi中如何调用mock数据

官网

根据官网 通过执行 yar create umi 或者 npm create umi 就可以进行下载，
之后会出现选择 : 空格为选择 回车为确定
选择 project => 选择 app

选择是否使用 TypeScript，

然后，选择你需要的功能 ==> antd + dva

OK, 基本架子已经选择好了 接下来开始使用自己的mock数据

1、新建 mock 数据

在 mock 文件下新建文件 heroList.js 为保存mock数据的一个文件

**const heroList = {
  status: 'ok',
  code: '200',
  list: [
    [
      {
        label: '2013',
        value: '2013',
      },
      {
        label: '2014',
        value: '2014',
      },
    ],
    [
      {
        label: '春',
        value: '春',
      },
      {
        label: '夏',
        value: '夏',
      },
    ],
  ]
}

export default {
  'GET /appservice/common/v1/getBusinessList': heroList
}**

2、调用数据

路径是 pages/index

1. 引入 connect

import { connect } from 'dva';

2. 定义监听接口名

@connect(({ loading }) => ({
  loading: loading.effects['index/getHeroList']
}))

我虽然现在没有创建models 但是可以先定义接口名字

3. 调用

  componentDidMount () {
    this.getHeroList()
  }

  getHeroList = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'index/getHeroList'
    }).then((res) => {
      console.log(res)
      this.setState({
        HeroList: res.list
      })
    })
  }

OK，现在该去创建models里面的数据了

3、创建models

目录是 /pages/index/models/index

import { getHeroListSer } from '@/server/S_index'

export default {
  namespace: 'index',
  state: {
  },

  effects: {
    *getHeroList({ payload }, { call }) {
      console.log('666')
      const response = yield call(getHeroListSer, payload)
      console.log(response)
      return response;
    }
  },
  
  reducers: {
  }

}

getHeroListSer 是 调用接口封装的， 所以这里还要继续新建

4、 创建 集体发起请求的js

import { HTTP } from '@/utils/creatApi'

export const getHeroListSer = HTTP('/appservice/common/v1/getBusinessList', 'GET')

5、创建 Http 发起请求 和 返回数据

import { request } from '@/utils/quest'
import { stringify } from 'qs'


//对外接口
export function HTTP(url, METHOD = 'GET'){

  return async function h(params) {
    switch(METHOD.toUpperCase()) {
      case 'GET':
      return request.GET(`${url}${stringify(params)}`);
      case 'POST':
      return request.POST(`${url}`, params);
      default:
      break;
    }
  }
}

6、 封装请求方法

import axios from 'axios'
import { stringify } from 'qs'


//设置超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

export const request = {
  GET: function(url) {
    return new Promise((resolve, reject) =>{
        axios.get(url).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    });
  },
  POST: function(url, params) {
    return new Promise((resolve, reject) =>{
        axios.post(url, stringify(params)).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
          
    });
  }
}


// 响应拦截器（处理响应数据）
axios.interceptors.response.use( 
  response => {
    console.log(response.data.code)
      if(response.data.code == '200'){
          return Promise.resolve(response);
      }else{
          //这个地方可以由后台编辑状态码区分不同情况，做不同的逻辑处理
          return Promise.reject(response);
      }
  },
  error => {
      // //请求失败，这个地方可以根据error.response.status统一处理一些界面逻辑，比如status为401未登录,可以进行重定向
      // router.replace({      
      //     path: '/login',      
      //     query: { redirect: router.currentRoute.fullPath } 
      //    });
      return Promise.reject(error.response);  

  }
)

github 地址