调用 api 接口 & mock 本地数据 | dva

详细参考：DvaJS

调用 api 接口

---

以调用cnode接口为例子

第一步：编辑.webpackrc文件

添加：

"proxy": {
  "/apis": {
    "target": "目标 API 接口",
    "changeOrigin": true,
    "pathRewrite": {"^/apis": ""}   // 可省...
  }
}

配置代理，调通接口

第二步：编辑services/example.js文件

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

const pox = "/apis/"
export function testCnode() {
  return request(pox + '/api/v1/topics');
}

第三步：调用接口

1. 在组件中使用接口

import  * as apis from '../services/example'

apis.testCnode().then((res) => {
  console.log(res)
})

2. 在model中使用接口
以

import * as apis from '../services/example'

export default {
  namespace: 'indexPage',
  state: {
     cnodeData: []
  },
 
  effects: {
    *testCnode(action, {put, call}) {
      let rel = yield call(apis.testCnode)
      if(rel.data) {
        yield put({
          type: 'setCnodeDataList',
          data: rel.data.data
        })
      }
    }
  },
  
  reducers: {
     setCnodeDataList(state, payload) {
      return {
        ...state,
        cnodeData: payload.data
      }
    }
  },
}

首先导入import * as apis from '../services/example'，
在effects异步中使用call(apis.testCnode)调用接口数据，
找到详细数据在put({data: 详细数据})使用，作为put({type: 对应的事件})的payload值传给reducers中对应的事件
在组件中使用mapStateToProps就可以获取数据了

mock 本地数据

---

mock 数据不需要这么麻烦，直接在 reducers 中，把 json 格式的文件设置到 state 里面就可以

第一步：定义接口

在mock文件夹下，创建testMock.js文件，编辑文件：

module.exports={
  "GET /api/mockdata": (req, res) => {
    console.log(req)
    res.send({
      msg: '登录成功'   // 为要 mock 的数据
    })
  }
}

第二步：注册接口

找到.roadHogrc.mock.js文件，编辑：

export default {
  ...require("./mock/testMock")
};

第三步：请求接口

在services/example.js中请求接口

扫描二维码关注公众号，回复： 9693511 查看本文章

export function mockdata() {
  return request("api/mockdata");
}

第四步：同上使用接口

…