Fetch JS

Why Fetch & Webpack?

Learning how to make HTTP requests using JavaScript(JS) Fetch API and build tool webpack. HTTP is a protocol for fetching resources, a way to communicate with a server, two of the most common requests are GET and POST, we will start with the get request. theWhiteFox Fetch API Webpack Basics repo

Fetch API is a JavaScript Application interface API that makes HTTP requests simpler, cleaner & more logical, using JS promises. "Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function." Asynchronous JavaScript

webpack is mainly a JavaScript static file / module bundler to use in the browser installed with NPM, and convert the modules into static assets.

Fetch API lets see how to use it to make asynchronous HTTP requests.

HTTP Requests with thier Create Read Update Delete (CRUD) equivalent

Yeah let's code!

Create a basic fetch function called fetchText, using async await. readme is a local text file.

async function fetchText() {
    let response = await fetch('./readme.txt');
    let data = await response.text();
    console.log('fetchText: ' + data)
}

fetchText();

async function fetchText2() {
    let response = await fetch('./non-existence.txt');

    console.log(response.status); // 404
    console.log(response.statusText); // Not Found

    if (response.status === 200) {
        let data = response.text();
        // handle data
        console.log('fetchText2: ' + data)
    }
}

fetchText2();

webpack

const path = require('path');

module.exports = {
    entry: [
        "@babel/polyfill",
        './src/js/app.js',
        './src/sass/app.scss'
    ],
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: 'js/main.js'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            }, {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: { outputPath: 'css/', name: '[name].min.css'}
                    },
                    'sass-loader'
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, './'),
        compress: true,
        port: 3000
    }
};