phpstudy集成环境

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

在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请求，如何传递返回值？

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

你的import/export语法错了，你问的问题，因为代码被编译过，所以模块和函数名变了。

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 请求是异步的，拿返回值只能通过回调函数了

  1. networkEngine变networkEngine2是因为babel编译的原因，tests不是函数的错误，是因为tests不是networkEngine的静态方法（类方法），

  2. tests而是一个实例方法，需要在实例上调用。比如var networkEngine = new NetworkEngine(); networkEngine.tests() 。或者把tests改为静态方法（static tests(){}），就可以像你这样调用。

  3. ajax get可以参考http://www.w3school.com.cn/jquery/ajax_get.asp

又到了把我写的小函数拿出来用的时候了，自认为还是比较简单好用的

const AjaxGet = function( method, url, callback ){

    var xhr = new XMLHttpRequest()
    xhr.open(method, url, true)
    xhr.withCredentials = true
    xhr.send()
    xhr.onreadystatechange = function(){

        if((xhr.readyState == XMLHttpRequest.DONE) && (xhr.status == 200)){
            callback(JSON.parse(xhr.responseText))
        }else{
            callback({errno:false})
        }
    }
}
export default AjaxGet

使用的话举例，GET方式，还有delete方式都可以用这个

import AjaxGet from 'libs/ajaxGet.js'

AjaxGet('GET', '/api/user/initme', (res) => {
    if (res.errno) {
        this.setState({
            me: res.meData
        })
    } else if (res.message === 'nologin') {
        alert("无法获得用户信息，将回到登陆页面")
        window.location = "/login"
    }
})

send的话需要多传入一个发送的数据
无非就是提取出ajax时候必须的几个元素，封装掉那些对于你项目不需要的地方，不需要通过class的形式，只是一个普通的函数而已，类似于react的无状态组件，你看无状态组件其实也是一个函数。传入一个callback，ajax完成的时候会调用它。我这里res.errno本来是指望服务器传回一些错误代码的，然而后来嫌麻烦就没有定义，只是传回true和false了

AjaxSend放下面来，方便你看。 post，put都可以用ajaxSend

const AjaxSend = function( action, url, data, callback)  {

    var xhr = new XMLHttpRequest()
    xhr.open(action, url, true)
    xhr.withCredentials = true
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onreadystatechange = function(){
        if ((xhr.readyState == XMLHttpRequest.DONE) && (xhr.status == 200)) {
            callback(JSON.parse(xhr.responseText))
        }
    }
    xhr.send(JSON.stringify(data))
}

export default AjaxSend

在 ES6 中使用 class 新建一个类时，在 import 中使用的时候要 new 一下：

import networkEngine from './../Server/networkEngine' ;
...
const request  = new networkEngine();
request.tests();  // test1
...
【热门文章】
【热门文章】