React Dva项目中模仿网络请求数据方法

news2024/10/5 13:09:25

我们都已经选择react了那么自然是一个前后端分离的开发形式
至少我在公司中大部分时候是前后端同时开发的
一般你在开发界面没有接口直接给你但你可以和后端约定数据格式然后在前端模拟数据
我们在自己的Dva项目中在根目录下的 mock 目录下创建一个js文件我这里叫 filmData.js
在这里插入图片描述
filmData.j参考代码如下

module.exports = {
    "GET /api/filmDataList":{
        state: 200,
        message: "请求成功",
        data: [
            {
                name: "午夜凶铃",
                describe: "《午夜凶铃》是日本地区最知名的恐怖片之一，影片主导演是中田秀夫。本部影片在1998年的1月31日正式在日本地区上映，影片的内容主要改编于由小说家铃木光司所写的同名小说。"
            },
            {
                name: "咒怨",
                describe: "《咒怨》是日本地区的恐怖系列影视作品之一，内容主要讲述了有怨气的人在死后会在之前所居住的地方长期停留，进入到这些地方的人都会受到诅咒。本部影片上映的时间是2003年的1月25日。"
            },
            {
                name: "死寂",
                describe: "《死寂》上映于2007年的3月16日，是由温子仁作为总导演创作的一部恐怖电影。"
            }
        ]
    }
}

这里我们定义了一个 GET类型路径/api/filmDataList
返回值一个对象对象内的内容你们就直接看情况该就行了

然后我们根目录下面有一个 .roadhogrc.mock.js 我们刚刚写的内容在这个文件中就可以做调用了
在这里插入图片描述
这里我们写

...require("./mock/filmData")

在这里插入图片描述
引入刚刚写的 filmData.js文件

然后我们打开 src目录下的services下的example.js
这里是api所在的地方
在这里插入图片描述
这里我们加一个函数来调用我们自己写的/api/filmDataList接口

export function getFilmData() {
  return request('/api/filmDataList');
}

在这里插入图片描述
此时我们调用 getFilmData 函数就可以了
例如我们在components中创建一个组件编写代码如下

import React from "react"
import { getFilmData } from "../services/example";
class Product extends React.Component {
    constructor(props){
      super(props);
      this.state = {
      }
    }

    componentDidMount() {
      getFilmData().then(res =>{
        console.log(res);
      })
    }

    render(){
      return (
        <div>
           
        </div>
      )
    }
}

export default Product