llamada de API de interfaz y simulacro de datos locales | DVA

Detalles Referencia: DvaJS

Interfaz API llamada

---

Para invocar cnodela interfaz como un ejemplo

El primer paso: Editar el .webpackrcarchivo

Añadir:

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

agente de configuración, transferida a través de la interfaz

Paso 2: Editar services/example.jsel archivo

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

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

Paso tres: Call Interface

1. Uso componente de interfaz

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

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

2. En modelutilizar la interfaz
para

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

Presentado por primera vez import * as apis from '../services/example',
en effectsel asíncrona utilizando call(apis.testCnode)datos de la interfaz de llamadas,
para encontrar los datos que se detallan en put({data: 详细数据})uso, ya que put({type: 对应的事件})el payloadvalor se pasa reducersen 对应的事件
uso en el conjunto mapStateToPropspueden obtener los datos

simulacro de datos local

---

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

El primer paso: definir la interfaz

En la mockcarpeta, crear un testMock.jsarchivo, editar el archivo:

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

Segundo paso: registro de la interfaz

Encuentra .roadHogrc.mock.jsArchivo, Edición:

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

El tercer paso: Solicitud de interfaz

En services/example.jsla interfaz de petición

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

Paso cuatro: Igual que el anterior utilizando una interfaz

...