React IE11 async вызывает ожидаемую ошибку}
Я пробую учебник для базового веб-приложения react, и он отлично работает в chrome. Вот мой код:
import React, {Component} from 'react';
export default class App extends Component {
async componentDidMount() {
const [r1,r2] = await Promise.all([
fetch('http://api.mywebsite.com/content/cars'),
fetch('http://api.mywebsite.com/content/aircrafts'),
]);
this.setState({content:await r1.json(),content2: await r2.json()});
}
render() {
if(this.state) {
console.log(this.state);
}
return (
<div>hello</div>
)
}
}
это работает точно так, как я ожидаю в Chrome - загрузите компонент react, извлеките некоторые данные, установите состояние и распечатайте состояние для консоли.
однако этот код не будет выполняться в Internet Explorer 11. Все, что я получаю, это пустая страница, и в моих инструментах разработчика я получаю ошибку
ожидается, что '}'
Когда Я нажмите на ссылку на ошибку, она выделяет этот сегмент кода:
_createClass(App, [{
key: 'componentDidMount',
value: async function componentDidMount() {
var _ref = await Promise.all([fetch('http://new.evermight.com/content/index'), fetch('http://new.evermight.com/content/index')]),
_ref2 = _slicedToArray(_ref, 2),
С стрелочка в строке value: async function componentDidMount() {
.
как сделать эту работу в Internet Explorer 11? Я хочу, чтобы setState срабатывал только после вызовов выборки, и они завершены. Мне нужно поведение ожидания.
редактировать
я использую webpack для компиляции моего проекта. И если это поможет, вот мой пакет.файл json:
{
"name": "scroll",
"version": "0.1.0",
"private": true,
"dependencies": {
"animated": "^0.2.1",
"es2015": "0.0.0",
"gsap": "^1.20.3",
"history": "^4.7.2",
"jquery": "^3.2.1",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-ga": "^2.4.1",
"react-router-dom": "^4.2.2",
"react-scripts": "0.9.5",
"react-transition-group": "^1.2.0",
"scrollmagic": "^2.0.5",
"video-element": "^1.0.3"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.25.0",
"eslint": "^4.13.0",
"eslint-config-aqua": "^2.0.1",
"eslint-plugin-react": "^7.5.1",
"file-loader": "^0.9.0",
"node-sass": "^3.10.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"url-loader": "^0.5.7",
"webpack": "^3.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
и вот мой webpack.конфиг.js
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {app:'./src/Index.js'},
output: {
filename: '[name].bundle.js',
chunkFilename: '[id].[hash].bundle.js',
path: '/var/www/html/public/build',
publicPath: '/build/'
},
plugins: [
// This plugin minifies all the Javascript code of the final bundle
new UglifyJsPlugin({
uglifyOptions:{
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
},
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'main', // Move dependencies to our main file
children: true, // Look for common dependencies in all children,
minChunks: 2, // How many times a dependency must come up before being extracted
})
],
module: {
loaders: [
{ test: /.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
{ test: /.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ]},
{ test: /.(jpg|gif|png|otf|eot|woff|svg|ttf)(?.*)?$/, loader: "file-loader" }
]
}
}
2 ответов
async-await
Не поддерживается в IE.
Проверьте MDN docs
вам нужно использовать Promises
вместо like
componentDidMount() {
Promise.all([
fetch('http://api.mywebsite.com/content/cars'),
fetch('http://api.mywebsite.com/content/aircrafts'),
]).then(([r1, r2]) => {
this.setState({content:r1.json(),content2: r2.json()});
})
}
также для поддержки обещаний в IE вам нужно использовать сторонние библиотеки Polyfill, такие как птица или использовать babel-polyfill
на самом деле, я получил async
и ждать, чтобы работать в IE11. В моем вопросе у меня также была проблема с fetch
не поддерживается в IE11. Вот что я сделал, чтобы решить обе проблемы. Я пошел к своему терминалу bash и набрал это
npm install --save es6-promise
npm install --save-dev babel-polyfill
npm install --save-dev babel-plugin-transform-async-to-generator
npm install --save isomorphic-fetch
затем я добавил Эти две строки в самое начало моего src/Index.js
перед любым другим кодом, потому что это моя точка входа:
import "babel-polyfill";
import "isomorphic-fetch";
затем я запустил webpack
команда, и теперь мой IE11 поддерживает код, который я создал с async await
и он поддерживает .