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

This will return a promise. We can use the then method on any promise to act on the result

if the promise resolves successfully:

.then(response => {

this.advice = response.data.slip.advice

})

The response object will contain some data about the result of our request. A possible

response object is the following:

{

"data": {

"slip": {

"advice": "Repeat people's name when you meet them.",

"slip_id": "132"

}

},

"status": 200,

"statusText": "OK",

"headers": {

"content-type": "text/html; charset=UTF-8",

"cache-control": "max-age=0, no-cache"

},

"config": {

"transformRequest": {},

"transformResponse": {},

"timeout": 0,

"xsrfCookieName": "XSRF-TOKEN",

"xsrfHeaderName": "X-XSRF-TOKEN",

"maxContentLength": -1,

"headers": {

"Accept": "application/json, text/plain, */*"

},

"method": "get",

"url": "http://api.adviceslip.com/advice"

},

"request": {}

}

We navigate to the property we want to interact with; in our case, we want

response.data.slip.advice, which is the string. We copied the string in the variable

advice in the instance state.