react接口调用
我们通过npm create-react-app my-app创建react项目,在项目里都是要进行接口调用来获取数据,进行增删改查各种操作的,所以掌握接口调用方式是非常必要的,话不多说进入正题:
想要掌握接口调用的内里逻辑,你得了解一下React Redux 、Generator、Dva的相关知识,当然react的相关知识也是必不可少的。
react的特点就是组件化开发,所以它的封装性比较好,下面是我项目的目录结构(我只是个实习生,项目非我架构):models文件夹里的文件是React Redux里的逻辑,规定了前端页面dispatch()的type属性;
pages文件夹里的文件就是前端视图展示的页面,也是dispatch()书写的地方;
services文件夹里的文件是前端调用后台接口的地方,models和services里的文件都是同名文件;
models文件夹的文件结构大致如下:
- import导入services同名文件里的export的方法
- const一个自定义的Model对象
Model里的结构:
namespace:‘自定义字符串’,
state:{},
effects:{里面是上面的models图片展示内容},
reducers:{纯函数,接收一个旧state和一个新的action,返回一个新的state},
具体Model方法含义以及使用逻辑请参照redux官网!!!
好啦,前端调用后台接口大致就这样啦,如果有什么错误请指出,如果帮到你了请留个言哇~~~~~~~~~~~