React项目配置3(如何管理项目API接口)

时间:2022-05-08
本文章向大家介绍React项目配置3(如何管理项目API接口),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React项目配置1(如何管理项目公共js方法)---2018.01.11

2、React项目配置2(自己封装Ajax)---2018.01.12

3、React项目配置3(如何管理项目API接口)---2018.01.15

4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16

5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17

6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18

7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增)

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

上节课我们讲了如何自己封装ajax,那么我们请求的api接口应该怎么管理呢?

总不能总是这样写把!

componentDidMount() {
    apiRequest.post('/api/xx/xx', {
        start: 0,
        end: 20
    }, data => console.log(data), data => console.log(data.code))
}

今天我们来讲下,如何管理项目API接口!!!

1、我们在 app -> public -> js -> 下新建 apiManager.js

2、然后在这里面写我们的接口地址

export default {
    "newsList": "/api/newsList"
}

3、有时候需要验证用户身份,我们可以在这里api加上token

一般我们登录完之后,会把 token存在本地 cookie中

我们安装第三方依赖

npm i -S react-cookie@0.4.6

主要这里是要 -S ,我们需要把这个包,打进 vendor中

import cookie from 'react-cookie'
let token = cookie.load('token');
export default {
    "newsList": "/api/newsList" + "?token=" + token
}

4、我们再来优化下

import cookie from 'react-cookie'
let token = cookie.load('token');
let postApi = (path) => {
    return path + '?token=' + token;
};
export default {
    "newsList": postApi("/api/newsList"),
    "newsList2": postApi("/api/newsList2"),
}

5、我们导入apiManager.js

在app -> component -> shop -> Index.jsx

import apiManager from '../../public/js/apiManager'

然后调用 newsList

componentDidMount() {
    apiRequest.post(apiManager.newsList, {
        start: 0,
        end: 20
    }, data => console.log(data), data => console.log(data.code))
}

即可!!!

---------------------------------------------------------------------------------------------

一些其他写法!!!

如果你不想,每次都引入apiManager.js ,觉得这样麻烦!你页可以这样做!

在 app -> public-> js -> apiRequest.js 中 ,引用它

import apiManager from './apiManager'

然后改造

const apiRequest = {
    get: (apiName, data, successCB, errorCB) => {
        return ajax(apiManager[apiName], "get", data,
            (data, status, xhr) => successCB && successCB(data.data, data.systemDate),
            errorCB);
    },
    post: (apiName, data, successCB, errorCB) => {
        return ajax(apiManager[apiName], "post", data,
            (data, status, xhr) => successCB && successCB(data.data, data.systemDate),
            errorCB);
    }
};

然后 在app -> component -> shop -> Index.jsx

只需要这样写

componentDidMount() {
    apiRequest.post('newsList', {
        start: 0,
        end: 20
    }, data => console.log(data), data => console.log(data.code))
}

newsList 等于 apiManager.js 中

我们来测试一下,看下浏览器

如果你有什么问题,可以在下方留言给我们!