web-dev-qa-db-fra.com

React IE11 async provoque l'erreur attendue}

J'essaie un didacticiel pour une application Web React de base et cela fonctionne parfaitement dans Chrome. Voici mon code:

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>
    )
  }
}

Cela fonctionne exactement comme je l'attend dans Chrome - chargez le composant React, récupérez des données, définissez l'état et imprimez l'état sur la console.

Cependant, ce code ne s'exécutera pas dans Internet Explorer 11. Tout ce que j'obtiens est une page vierge et dans mes outils de développement, j'obtiens l'erreur

'}' Attendu

Lorsque je clique sur le lien vers l'erreur, il met en évidence ce segment de code:

  _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),

Avec une flèche pointant vers la ligne value: async function componentDidMount() {.

Comment faire pour que cela fonctionne dans Internet Explorer 11? Je veux seulement que setState se déclenche une fois les appels de récupération terminés. J'ai besoin du comportement d'attente.

MODIFIER

J'utilise webpack pour compiler mon projet. Et si cela peut aider, voici mon fichier package.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"
  }
}

Et voici mon webpack.config.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" }
    ]
  }
}
reactjsasync-awaitinternet-explorer-11
11
John

En fait, j'ai obtenu async et j'attends de travailler dans IE11. Dans ma question, j'ai également eu un problème avec fetch non pris en charge dans IE11. Voici ce que j'ai fait pour résoudre les deux problèmes. Je suis allé à mon terminal bash et j'ai tapé ceci

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

Ensuite, j'ai ajouté ces deux lignes au tout début de mon src/Index.js avant tout autre code car c'est mon point d'entrée:

import "babel-polyfill";
import "isomorphic-fetch";

Ensuite, j'ai exécuté la commande webpack, et maintenant mon IE11 prend en charge le code que j'ai créé avec async await et il prend en charge la commande fetch.

12
John

async-await n'est pas pris en charge dans IE.

Vérifiez le MDN docs

Vous devez utiliser Promises à la place comme

 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()});
    })

 }

Aussi, afin de prendre en charge les promesses dans IE, vous devez utiliser des bibliothèques Polyfill tierces comme BlueBird ou utiliser babel-polyfill

5
Shubham Khatri