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

前端人人

发布于 2018-04-11 17:10:16

1.9K0

发布于 2018-04-11 17:10:16

文章被收录于专栏：前端人人

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

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-01-12，如有侵权请联系 cloudcommunity@tencent.com 删除

react

ajax

api

windows

本文分享自前端人人微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐