Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Axios Catch being called even when response is 200 (Successful)

I am using a Electron Vue App with Axios for my HTTP calls to my Laravel Server. Everything was perfect in Dev mode of Electron. But as soon as I build my Electron App into a install and put it on the clients computer all chaos broke out. I fix some issues but this one issue is gonna kill me.

Simply put, even though all Axios return successfully they throw an error that I put in .catch(). I'm honestly very confused how that is even possible. For instance when my program loads it makes some calls to get needed information. Throws error and displays alert. I figure it was just my Laravel Server. But the data was successfully grabbed and added to application.

axios.post(`${this.$store.state.URL}/get_server_ticket_from_table?api=${this.$store.state.API}`, {
    id: this.ServerTicketMove.Server1.id,
    table: this.ServerTicketMove.currentTable
})
.then((response) => {
    console.log(response)

    if (typeof response.data.id != 'undefined') {
        this.ServerTicketMove.ticket = response.data

    }

})
.catch(() => {
    alert('Did not get Servers Table Information. Cant Connect to Main Server.')
}) 

I did some googling and saw some posts about CORS. So I went through and enabled that on my Web Server and in Laravel. That made a bigger mess. Same error but this time no data was applied to anything. So the .then() is not even being called. On top of that with CORS enabled my Axios seems to be making an additional HTTP call with the Request Method of OPTIONS. Why? I don't think CORS is the answer to my problem.

Also inside of my Electron Vue background.js I turned web security back on. Which was off because of development. Which did not change anything.

win = new BrowserWindow({
    width: 275,
    height: 640,
    title: 'title',
    // webPreferences: { webSecurity: false }
})

Does Anyone know what is happening?

EDIT - 1-14-2019

After finding the error "regeneratorRuntime is not defined" I think this is a Babel Issue. I've followed everything https://babeljs.io/docs/en/babel-polyfill/ and I still get the "regeneratorRuntime is not defined". Is there anything about Babel + Axios + Electron + Await/Sync working all together with no errors? I personally would like to not just ignore the "regeneratorRuntime is not defined" and find a solid solution for this problem if possible. Any input or things for me to research would be appreciated!

like image 539
Zach C. Avatar asked Jan 03 '19 08:01

Zach C.


2 Answers

this issue happen when your response have an error , for example when the response is correct but in the then response you do something that throw an error , axios then catch that error , even if the response from the server was success

like image 153
Ilya Alexeev Avatar answered Oct 28 '22 08:10

Ilya Alexeev


After much Googling I figured out I was simply missing dependencies in my package.json. Even though they were required in node_modules folder they were not listed as a dependency in my program.

Working on my Production build of Electron + Vue + Axios + Sync/Await

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

And, in .babelrc, add:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

Got this code from this answer from here

like image 43
Zach C. Avatar answered Oct 28 '22 06:10

Zach C.