Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Vue Communicates with the Internet Chapter 14

The last part is when something wrong happens to our request or to our code inside the

first branch:

.catch(error => {

this.advice = 'There was an error: ' + error.message

})

We will explore error handling more in depth in the Recovering from an error during a
request recipe. For now, let's trigger an error by hand, just to see what happens.

The cheapest way to trigger an error is to run the app on JSFiddle. Since the browser detects

JSFiddle on a secure connection and our API is on HTTP (which is not secure), modern
browsers will complain and will block the connection. You should see the following text:

There was an error: Network Error

This is just one of the many possible errors you can experiment with. Consider that you edit
the GET endpoint to some non-existent page:

axios.get('http://api.adviceslip.com/non-existent-page')

In this case, you will get a 404 error:

There was an error: Request failed with status code 404

Interestingly, you will end up in the error branch even if the request goes well but there is

an error in the first branch.

Change the then branch to this:

.then(response => {

this.advice = undefined.hello

})

As everybody knows, JavaScript cannot read "hello" property of an undefined object:

There was an error: Cannot read property 'hello' of undefined

It's just as I told you.