javascript - 在react项目中用es6封装ajax请求，组件中调用总是报错，求解？

问题描述

问 题

函数代码如下

class networkEngine{
    get(req){
        req.type = 'get' ;
        req.dataType = 'json' ;
        req.cache = 'false' ;
        req.beforeSend = xhr =>{
            xhr.setRequestHeader('siXtRq3jPQlKpfKa15PFN6cS-gzGzoHsz ','u5SyAXObPG19dqtpnt1NOnoe ') ;
        } ;
        $.ajax(req) ;
    }

    tests(){
        console.log("test1")
    }
}

export { networkEngine as default } ;

组件中的代码如下

import networkEngine from './../Server/networkEngine' ;

class Teamholl extends React.Component {

    componentDidMount() {
      networkEngine.tests()
    }

    render(){
        return (
            <div>...</div>
        ) ;
    }
}

export { Teamholl as default } ;

报错信息如下

Uncaught TypeError: _networkEngine2.default.tests is not a function

我有几点疑问：
1，为什么我的类名是networkEngine报错信息却提示_networkEngine2.default.tests不是函数。
2，正确的调用方式是什么？
3，ajax的get请求，如何传递返回值？

我是前端初学，希望可以讲具体一点，谢谢。

解决方案

1、 babel 编译的代码就是这样的，比如：

原始代码：

import Test from './test';
Test.hehe();

编译之后应该是：

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _test = require('./test');
var _test2 = _interopRequireDefault(_test);
_test2['default'].hehe();

2、 你定义的 tests 方法是类 networkEngine 的实例方法，需要先实例化才能调用

new networkEngine().tests();

如果你不想实例化就调用，那就需要定义成静态方法：

networkEngine.tests = function() {
  console.log('静态方法 tests');
}

提示：类名最好首字母大写，NetworkEngine

3、 ajax 请求是异步的，拿返回值只能通过回调函数了

这篇关于javascript - 在react项目中用es6封装ajax请求，组件中调用总是报错，求解？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！