如何在javascript ES6中正确导出和导入类

时间:2017-09-14 16:58:55

标签: javascript reactjs ecmascript-6

有人可以向我提供关于我的类对象的一些指导以及如何在我的项目中引用它吗?

这是我的[ constant-expression ] 对象 - request-api.js(注意:我知道其中没有太多进展,但我想在我跑步之前走路)

RequestAPI

以下是我试图在其中引用它的React类组件:

export class RequestApi {
    constructor() {
        this.apiBase = '../api';
    }

    fetch(url, options) {
        var options = options || {};
        return fetch(this.apiBase + url, options)
            .then(_handleResponse, _handleNetworkError);
    }

    _handleResponse(response) {
        if (response.ok) {
            return response.json();
        } else {
            return response.json().then(function (error) {
                throw error;
            });
        }
    }

    _handleNetworkError(error) {
        throw {
            msg: error.message
        };
    }
}

我在React Component Class对象中遇到错误:import React from 'react'; import { RequestApi } from '../../../../utils/request-api.js'; class UserLayout extends React.Component { constructor() { super(); this.state = { users: [], isLoading: true }; this.addNewUser = this.addNewUser.bind(this); this.editUser = this.editUser.bind(this); this.deleteUser = this.deleteUser.bind(this); } componentDidMount() { return RequestApi.fetch('/user') .then(json => { this.setState({ isLoading: false, users: json }); }) .catch(error => { console.error(error.msg); }); } // more code here... }

有人能为我提供一些见解/帮助吗?

1 个答案:

答案 0 :(得分:3)

由于fetch不是静态方法,因此您需要在调用RequestApi之前创建fetch的实例:

componentDidMount() {
    const api = new RequestApi();
    return api.fetch('/user')
        .then(json => {
            this.setState({
                isLoading: false,
                users: json
            });
        })
        .catch(error => {
            console.error(error.msg);
        });
}