前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React项目配置2(自己封装Ajax)

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、我们开始封装

代码语言:javascript
复制
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

代码语言:javascript
复制
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请求参数,还有固定的额外参数,如版本号什么的!在这里添加

代码语言:javascript
复制
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)
        }
    });
};

新添加了

代码语言:javascript
复制
let dataJson = {
    version: "1.0.0",
    data: data
};

当然这个要跟后台协商好格式!

包括api返回的数据,需要这样的返回格式!

4、我们添加最后一个方法!

代码语言:javascript
复制
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、我们导出

代码语言:javascript
复制
export default apiRequest;

完整代码:

代码语言:javascript
复制
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

代码语言:javascript
复制
import apiRequest from '../../public/js/apiRequest';

并在componentDidMount 中调用

代码语言:javascript
复制
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 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档