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

(singke) #1
Vue Communicates with the Internet Chapter 14

We can launch our application now and try to write our salty comment:


How it works...


In the mounted hook, we are installing a so-called interceptor. In particular, it is a


request interceptor, which means it will take our request and manipulate it before sending


it out to the Internet:


axios.interceptors.request.use(config => {
const body = config.data.body.replace(/punk/i, '***')
config.data.body = body
return config
})

The config object contains a lot of things we can edit. It contains the headers and URL


parameters. It also contains Axios configuration variables. You can check out the Axios
documentation for an up-to-date list.


We are taking what's inside the data part that got sent along with the POST request and


sniffing if the punk word is found. If that is the case, it will get substituted with asterisks.


The returned object will be the new config for the current request.

Free download pdf