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

前端人人

已于 2022-03-20 19:06:20 修改

阅读量5.2k

点赞数

分类专栏：前端文章标签： react webpack

于 2018-01-15 10:46:35 首次发布

本文链接：https://blog.csdn.net/oKeYue/article/details/79061978

版权

前端专栏收录该内容

66 篇文章 3 订阅

订阅专栏

本教程总共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))
}