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

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

开发环境: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 key in 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 key in 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 apiRequest from '../../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

本文完

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

感谢童鞋们支持!

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

以上是 React项目配置2(自己封装Ajax) 的全部内容，来源链接： utcz.com/z/382264.html

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

其他人也看了：