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 中
我们来测试一下,看下浏览器
如果你有什么问题,可以在下方留言给我们!