在IE9中,使用babel-polyfill无法解决ES6 Promise问题

时间:2016-10-13 10:21:22

标签: javascript webpack internet-explorer-9 babeljs es6-promise

我正在使用Webpack和babel-polyfill依赖关系转换我的ES6代码并尝试使其在IE9中工作。它在IE10和IE11中工作但由于某种原因我的异步Promise在IE9中没有被解析并且发现错误。

这是我的承诺代码:

modified_files=`git diff --cached --diff-filter='M' --name-only | paste -d', ' -s`
if test "" != "$modified_files"
then
    echo "Affected files: $modified_files" >> $1
fi

我的转换承诺代码:

function getJson(url) {
    // Return a new promise
    return new Promise((resolve, reject) => {
        // Do the usual XHR stuff
        let req = new XMLHttpRequest();
        req.open('GET', url);

        req.onload = () => {
            // This is called even on 404 etc, so check status
            if (req.status >= 200 && req.status < 400) {
                // Resolve the promise with the response text
                resolve(req.response);

            } else {
                // Otherwise reject with status text which will hopefully be a meaningful error
                reject(Error(req.statusText));
            }
        };
        // Handle network errors
        req.onerror = () => {
            reject(Error('Network Error'));
        };
        // Make the request
        req.send();
    });
}

export function loadAssets(url) {
    // then do our ajax event
    getJson(url)
        .then((response) => {
            // Convert string to array
            let parsedJson = JSON.parse(response);

            // dispatch receive assets
            dispatcher.dispatch({
                type: actionMessages.receiveAssets,
                assets: parsedJson
            });

            // there are a max of 20 assets per assetsdata file
            if (parsedJson.length < 20) {
                app.querySelector('footer').innerHTML = 'all assets loaded.';

                dispatcher.dispatch({
                    type: actionMessages.allAssetsLoaded
                });
            } else {
                app.querySelector('.cv-box').addEventListener('scroll', infiniteScroll);
            }
        })
        .catch(() => {
            console.log(error);

            dispatcher.dispatch({
                type: actionMessages.loadAssetsError
            });
        });
}

这是我的webpack.config文件:

function getJson(url) {
    // Return a new promise
    return new Promise(function (resolve, reject) {
        // Do the usual XHR stuff
        var req = new XMLHttpRequest();
        req.open('GET', url);

        req.onload = function () {
            // This is called even on 404 etc, so check status
            if (req.status >= 200 && req.status < 400) {
                // Resolve the promise with the response text
                resolve(req.response);

            } else {
                // Otherwise reject with status text which will hopefully be a meaningful error
                reject(Error(req.statusText));
            }
        };
        // Handle network errors
        req.onerror = function () {
            reject(Error('Network Error'));
        };
        // Make the request
        req.send();
    });
}

function loadAssets(url) {
    // then do our ajax event
    getJson(url).then(function (response) {
        // Convert string to array
        var parsedJson = JSON.parse(response);

        // dispatch receive assets
        _dispatcher2.default.dispatch({
            type: actionMessages.receiveAssets,
            assets: parsedJson
        });

        // there are a max of 20 assets per assetsdata file
        if (parsedJson.length < 20) {
            app.querySelector('footer').innerHTML = 'all assets loaded.';

            _dispatcher2.default.dispatch({
                type: actionMessages.allAssetsLoaded
            });
        } else {
            app.querySelector('.cv-box').addEventListener('scroll', infiniteScroll);
        }
    }).catch(function () {
        console.log(error);

        _dispatcher2.default.dispatch({
            type: actionMessages.loadAssetsError
        });
    });
}

我在控制台日志中收到的错误是:

require('babel-polyfill');

var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');

module.exports = {
    context: '', // directory we currently in
    devtool: debug ? 'inline-sourcemap' : null,
    entry: ['babel-polyfill', './js/client.js'], // Babel polyfill is required to make Promises work
    module: {
        loaders: [
            {
                test: /\.js?$/, 
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            }
        ]
    },
    output: {
        path: __dirname + '/dist/',
        filename: 'client.min.js' 
    },
    watch: true,
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(), // strip out duplicate code
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false}) // gets rid of sourcemaps, comments, etc
    ]
};

有没有人知道如何摆脱这个错误并确保在IE9中解决了承诺?

0 个答案:

没有答案