babel es6错误的异常位置与反应答案

【问题标题】：babel es6 wrong exception location with reactbabel es6错误的异常位置与反应
【发布时间】：2016-06-09 00:21:21
【问题描述】：

我认为这是一个 babel 问题（不完全确定）。我的javascript控制台抛出的错误总是错误的......无论我的代码中出现错误的位置，它都指向我的handleFailure（serviceName，error）块......例如......调用this.foo（）;在手成功发生后，甚至在我移动 this.foo();到我的 getItemById 方法.. 它总是在同一个块中引发错误...我在我的商店做错了什么....

如果我删除虚假代码，它就可以正常工作...我希望向我显示的错误以引用虚假代码..

这是错误： AircraftLocationStore.js:40 服务器调用aircraftLocationRest 失败并出现错误：aircraftLocationRest!handleFailure @ AircraftLocationStore.js:40(anonymous function) @RestServiceClient.js:20

class AircraftLocationStore extends EventEmitter {
    constructor() {
        super();
        this._populateRestCallStatus = RestCallStatus.NOT_REQUESTED;
        this._dataStore = Map({});
        this.handleSuccess = this.handleSuccess.bind(this);
        this.handleFailure = this.handleFailure.bind(this);
    }
    populate(){
        RestService.fetchData(this.handleSuccess, this.handleFailure, 'aircraftLocationRest');
        this._populateRestCallStatus = RestCallStatus.STARTED
    }

    handleSuccess(serviceName, jsonData){
        UT.logMethod(TAG, `${serviceName} succeeded!`)
        jsonData.forEach((entity) => {
            let tempEntity = AircraftLocationHelper.createFromJson(entity);
            this._dataStore = this._dataStore.merge(Map.of(tempEntity.id, tempEntity))
        });
        UT.log('isMap', Map.isMap(this._dataStore))
        this.foo();
        this._populateRestCallStatus = RestCallStatus.SUCCESS;
        this.emitChange();
    }

    handleFailure(serviceName, error){
        //Utils.logMethod(TAG, 'handleFailure');
        this._populateRestCallStatus = RestCallStatus.FAILED
        console.error(`Server call ${serviceName} failed with error: ${serviceName}!`)
    }

  ...

export default new AircraftLocationStore();

如果我尝试在 onChange 中的显示组件上更改 immutablejs 记录，它会告诉我...

以防万一我将包含处理总是抛出错误的回调的代码

class RestServiceClient{

    /**
     * @param successCB
     * @param failureCB
     * @param endPoint
     */
    fetchData(successCB, failureCB, endPoint) {
        const serverUrl = BASE_URL + endPoint;
        UT.log('serverUrl', serverUrl);
        fetch(serverUrl).then(r => r.json())
            .then(data => successCB(endPoint, data))
            .catch(e => failureCB(endPoint, e.toString()))
    }
}
export default new RestServiceClient();

这是我的 webpack.config

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: "source-map",
  entry: "./src/index.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, 'src'),
            exclude: /node_modules/
        }]
    }
};

【问题讨论】：

如果你把它精简为一个更小的例子，你会有更多的运气。你也没有告诉我们抛出了什么错误。
我刚刚包含了它....我想不那么冗长，但我不知道它来自哪里....每当我的项目中的任何地方发生错误时，它都会引用该行 i提到...它很奇怪...
我明白你的意思，但是 SO 是一个回答特定问题的网站，你仍然有责任为我们提供足够的信息来回答问题。有时发布一堆代码并不是世界末日，因为问题很清楚，但在这里你并没有真正给我们太多继续，你基本上只是问“帮我解决这个问题”。开始删除函数和内联，直到你得到一个小例子来演示问题。

标签： ecmascript-6 babeljs

【解决方案1】：

问题似乎出在我由粗箭头创建的匿名函数中 =>

我改写了：

    fetch(serverUrl).then(r => r.json())
        .then(data => let foo = data; successCB(endPoint, data))
        .catch(e => failureCB(endPoint, e.toString()));

作为：

fetch(serverUrl)
            .then(
                function(response) {
                    if (response.status !== 200) {
                        failureCB(endPoint, 'Looks like there was a problem. Status Code: ' + response.status);
                    }
                    // Examine the text in the response
                    response.json().then(function(data) {
                        successCB(endPoint, data)
                    });
                }
            )
            .catch(function(err) {
                failureCB(endPoint, 'Looks like there was a problem. Status Code: ' + err);
         });

我又收到了一些有意义的错误信息...

【讨论】：