Shulou(Shulou.com)05/31 Report--

This article mainly introduces Vue how to set the axios request format to form-data related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this Vue how to set the axios request format to form-data article will have a harvest, let's take a look.

Cover

Using axios in Vue

!!! Format the form-data request and go straight to the back.

1. Install axios

Execute npm install axios under the project.

Then in main.js, add:

Import axios from 'axios' / / introduce / / Vue.use (axios) axios cannot be used use can only modify prototype chain Vue.prototype.$axios = axios

two。 Send GET request

Axios encapsulates the get method, passing in the request address and request parameters, and also supports Promise.

/ / get request let url with no parameters let url = "..." this.$axios.get (url). Then ((res) = > {console.log (res) / / returned data}) .catch ((err) = > {console.log (err) / / error message})

However, its parameters need to be written under the params attribute, that is:

/ / get request let url with parameters let url = ".getById" this.$axios.get (url, {params: {id: 1}}). Then ((res) = > {console.log (res) / / returned data}) .catch ((err) = > {console.log (err) / / error message})

two。 Send post request

The same as above, the parameters do not need to be written under the params attribute, that is:

/ / post request let url with parameters let url = ".getById" let data = {id: 1} this.$axios.post (url, data). Then ((res) = > {console.log (res) / / returned data}) .catch ((err) = > {console.log (err) / / error message})

3. Classical writing method

Axios can also be written as jQ, but the callback function is still written as Promise, such as:

This.$axios ({method: 'post', url:'...', data: {firstName: 'Fred', lastName:' Flintstone'}}) .then ((res) = > {console.log (res)})

Set the form-data request format

When I sent the data using the default post method, I found that the backend could not get the data, but I saw that the parameters were indeed passed out in network. And it is also possible to test with postman. After comparing the differences between the next two, it is found that postman uses form-data format, so it is requested again in form-data format to find OJBK.

It took some time to find and format the request, and there are several solutions on the Internet. I have tested this successfully and sent it up.

Import axios from "axios" / / introduce / / set axios to form-dataaxios.defaults.headers.post ['Content-Type'] =' application/x-www-form-urlencoded';axios.defaults.headers.get ['Content-Type'] =' application/x-www-form-urlencoded' Axios.defaults.transformRequest = [function (data) {let ret =''for (let it in data) {ret + = encodeURIComponent (it) +' ='+ encodeURIComponent (data [it]) +'&'} return ret}] / / then modify the prototype chain Vue.prototype.$axios = axios on "how to set the axios request format to form-data". Thank you for reading! I believe that everyone has a certain understanding of "how to set the axios request format of Vue to form-data". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.