CODEWITHSUNDEEP
javascriptasync-awaitwebpack-3
reza
reza

Reputation: 11

when I use the word async in webpack-3 the function not work

I was using async: false in ajax. I want to have the equivalent of this command in fetch. Apparently using async helps. But when I use the word async in the webpack, it does not work. i use webbpack 3.8.1 and in webpack.config.js:

const path = require('path');
const webpack = require('webpack');
  
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles_for_store_details_naghashi.css'/*'allstyles_for_store_details.css'*//*'allstyles.css'*/);
 
module.exports = { 
    entry: {
         'main': './wwwroot/source/app_for_store_details_naghashi.js' ,
     },
       
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle_for_store_details_naghashi.js' ,
        publicPath: 'dist/', 
    },
    plugins: [
        extractCSS,
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new webpack.optimize.UglifyJsPlugin(), 
    ],
    module: {
        rules: [
            {
                test: /\.css$/, use: extractCSS.extract(['css-loader?minimize'])
            }, 
            {
                test: /\.js?$/,
                use: {
                    loader: 'babel-loader', options: {
                        presets:
                            ['@babel/preset-react', '@babel/preset-env']
                    }
                }
            },           
        ]
    } 
};

in my file :

async function f12() {
    alert('13579-1122');  
}
f12();

It does not work when I use the word async. (I want the program to wait for the fetch command to complete when the fetch command is running. I was using async: false in ajax)

Upvotes: 0

Views: 566

Answers (1)

Andy
Andy

Reputation: 63587

Have a function that just fetches the data, and call that function from an async function that awaits the response (JSON, presumably), parses it, and then you can do what you want with it.

A bit like this:

function getData(url) {
  return fetch(url);
}

async function main() {
  try {
    const response = await getData('https://example.com');
    const data = await response.json();
    console.log(data);
  } catch(err) {
    console.log(err);
  }
}

main();

Additional documentation

Upvotes: 0

Related Questions