微信公众号首发
本教程总共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
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
如果你觉得引入jquery，或者react 第三方库 react-axios 等等，他们的体积太大，那么我们就来自己封装ajax（暂时先不讲 fetch）！
1、我们在 app -> public -> js 下，先建立一个 apiRequest.js
2、我们开始封装
const xmlNative = opt => {
opt = opt || {};
opt.method = opt.method.toUpperCase() ||'POST';
opt.url = opt.url ||'';
opt.async = opt.async ||true;
opt.data = opt.data ||null;
opt.success = opt.success ||function () {
};
let xmlHttp =new XMLHttpRequest();
if (opt.method.toUpperCase() ==='POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xmlHttp.send(JSON.stringify(opt.data));
}
else if (opt.method.toUpperCase() ==='GET') {
let params = [];
for (let keyin opt.data) {
params.push(key +'=' + opt.data[key]);
}
let postData = params.join('&');
xmlHttp.open(opt.method, opt.url +'?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState ===4) {
if (xmlHttp.status ===200) {
opt.success(JSON.parse(xmlHttp.responseText), xmlHttp.status);
}else {
opt.error(JSON.parse(xmlHttp.responseText), xmlHttp.status);
}
}
};
};
3.然后我们在下面新建ajax 方法，调用xmlNative
const ajax = (url, method, data, successCB, errorCB) => {
return xmlNative({
method: method,
url: url,
data: data,
success: (data, status) => {
if (data.code ===0) {
successCB && successCB(data, status)
}else {
if (errorCB) {
console.log(status, status)
}
}
},
error: (data, status) => {
console.log(status, status)
}
});
};
如果你大data请求参数，还有固定的额外参数，如版本号什么的！在这里添加
const ajax = (url, method, data, successCB, errorCB) => {
let dataJson = {
version:"1.0.0",
data: data
};
return xmlNative({
method: method,
url: url,
data: dataJson,
success: (data, status) => {
if (data.code ===0) {
successCB && successCB(data, status)
}else {
if (errorCB) {
errorCB(data, status)
}else {
console.log(data, status);
}
}
},
error: (data, status) => {
console.log(status, status)
}
});
};
新添加了
let dataJson = {
version:"1.0.0",
data: data
};
当然这个要跟后台协商好格式！
包括api返回的数据，需要这样的返回格式！
4、我们添加最后一个方法！
const apiRequest = {
get: (url, data, successCB, errorCB) => {
return ajax(url, "get", data,
(data, status, xhr) => successCB && successCB(data.data, data.systemDate),
errorCB);
},
post: (url, data, successCB, errorCB) => {
return ajax(url, "post", data,
(data, status, xhr) => successCB && successCB(data.data, data.systemDate),
errorCB);
}
};
5、我们导出
export default apiRequest;
完整代码:
const xmlNative = opt => {
opt = opt || {};
opt.method = opt.method.toUpperCase() ||'POST';
opt.url = opt.url ||'';
opt.async = opt.async ||true;
opt.data = opt.data ||null;
opt.success = opt.success ||function () {
};
let xmlHttp =new XMLHttpRequest();
if (opt.method.toUpperCase() ==='POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xmlHttp.send(JSON.stringify(opt.data));
}
else if (opt.method.toUpperCase() ==='GET') {
let params = [];
for (let keyin opt.data) {
params.push(key +'=' + opt.data[key]);
}
let postData = params.join('&');
xmlHttp.open(opt.method, opt.url +'?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState ===4) {
if (xmlHttp.status ===200) {
opt.success(JSON.parse(xmlHttp.responseText), xmlHttp.status);
}else {
opt.error(JSON.parse(xmlHttp.responseText), xmlHttp.status);
}
}
};
};
const ajax = (url, method, data, successCB, errorCB) => {
let dataJson = {
version:"1.0.0",
data: data
};
return xmlNative({
method: method,
url: url,
data: dataJson,
success: (data, status) => {
if (data.code ===0) {
successCB && successCB(data, status)
}else {
if (errorCB) {
errorCB(data, status)
}else {
console.log(data, status);
}
}
},
error: (data, status) => {
console.log(status, status)
}
});
};
const apiRequest = {
get: (url, data, successCB, errorCB) => {
return ajax(url, "get", data,
(data, status, xhr) => successCB && successCB(data.data, data.systemDate),
errorCB);
},
post: (url, data, successCB, errorCB) => {
return ajax(url, "post", data,
(data, status, xhr) => successCB && successCB(data.data, data.systemDate),
errorCB);
}
};
export default apiRequest;
我们来测试一下
6、我们在app -> component -.> shop -> Index.jsx 中 导入apiRequest
import apiRequestfrom '../../public/js/apiRequest';
并在componentDidMount 中调用
apiRequest.post('/api/xxx/xxx', {
start:0,
end:20
}, data =>console.log(data.code), data =>console.log(data.code))
我们看下浏览器
获取成功 打印出的数据
我们看下 错误是否能打印出code
控制台页打印出了 错误code
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论