react进行http请求，原生http请求封装

最新推荐文章于 2024-02-29 18:02:27 发布

望蜀得陇

最新推荐文章于 2024-02-29 18:02:27 发布

阅读量1.5w

点赞数

文章标签： http react

本文链接：https://blog.csdn.net/xiedong9857/article/details/55506605

版权

本文介绍如何在React中封装原生HTTP请求，包括GET、POST、JSONP及文件上传等方法，提供了一种不同于angular $http或jQuery AJAX的解决方案，旨在满足特定的项目需求。欢迎讨论和指正。

摘要由CSDN通过智能技术生成

react没有像angular的$resource或者$http，或者是jquery的$ajax一样的网络请求库，该网络请求是作者自己封装的，当然大家也可以根据自己需要改写。

其中主要的内容有get，post，jsonp和file上传几种格式

请求示例，里面可能用到了我其他的封装service，请忽略：

HttpService.query({
    url: '/api/active/follow',
    data: {
        extendKey: CommonService.getUrlParams('extendKey'),
        dstUin: this.props.dstUin
    },
    success: res => {
        console.log(res);
        if (res.retCode == 0) {
            this.setState({
                liked: true
            })
        } else {
            R_UiService.Toaster(res.retMsg)
        }
    }
});

如果是post请求或者jsonp也差不多。以下是源码，如果有特殊需求，也可以在其中进行自己的改造。源码不可在es5环境下直接使用，需要通过babel编译，推荐使用gulp或者webpack

/**
 * Created by sheldon on 2016/8/2.
 */
'use strict';

class HttpService {
    static query(config) {
        config = config || {};
        var params = HttpService.formatParams(config.data);

        var request = new XMLHttpRequest();