integrate webworker with axios for crud operation on data in react project

24 views Asked by At

i want to do CRUD operation on data on worker thread and keep main thread free for faster response but getting error : ERROR Uncaught ReferenceError: axios__WEBPACK_IMPORTED_MODULE_0__ is not defined at handleError (http://localhost:3000/static/js/bundle.js:119591:58) at http://localhost:3000/static/js/bundle.js:119610:7


//worker.js
import axios from "axios" 

export default function AppWorker(args) {
    onmessage = function(e) {
        if (e.data.action === "join_network") {
            axios.get('http://127.0.0.1:8000/get_allclient')
            .then((response) =>{
            postMessage(response.data);
        })
        .catch(function (error) {
            postMessage(error.message);
        });
    }
    };
}



// WebWorker.js

export default class WebWorker {
    constructor(worker) {
        let code = worker.toString();
        code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"));
        const blob = new Blob([code], { type: "application/javascript" });
        return new Worker(URL.createObjectURL(blob));
    }
}

 //appcomponent.jsx

const UploadWorker = () => {

    const handleImportClick = async (event) => {

        const file = event.target.files[0];

        console.log('clicked');
        const worker = new WebWorker(AppWorker);

        worker.onmessage = function(e) {
            console.log('Worker response', e.data);
            //setResult(true);
            console.log(e.data);
            alert("success")
        };

        worker.onerror = function(e) {
            console.log('error : ', e);
        };


        // Post a message to the worker
        if (file !== null) {
            worker.postMessage({
                action: "join_network"
            });
        }

    };
}
0

There are 0 answers