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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

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



本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

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


以上是 React项目配置3(如何管理项目API接口) 的全部内容， 来源链接： utcz.com/z/383346.html

回到顶部