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

Today, the editor will share with you the relevant knowledge points about how to configure the request header content-type in axios. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Start

Because we need to use the axios plug-in, we now have a project download dependency

Npm install axios-S

Although axios is a plug-in, we do not need to use Vue.use (axios). After the download is completed, you just need to introduce it into the project. As for why you can take a look at it or leave a message, it seems that the developer did not write install when encapsulating axios.

Use

For example, we use axios in the myInfo.vue in the project, and when the component is successfully created, it sends an Ajax request to get the user information to be displayed in front of us. It is introduced first, then the request is made in the component life cycle function created.

If you need to request data first and then render the page according to the data and display it in front of us, you can usually send an Ajax request in the component lifecycle hook created, where the properties and methods in the component instance can be called.

Now it's time to focus.

When axios uses post to send data, the default is to put the json in the request body and submit it to the backend. That is, our Content-Type becomes application/json;charset=utf-8, which is the default request header content-type type for axios. But in fact, the 'Content-Type':' application/x-www-form-urlencoded' required by our backend is common, which is not in line with us. So many students will make mistakes here, resulting in the request for data can not be obtained. Clearly their own request address and parameters are correct, but can not get the data.

Let's now talk about the common data formats for post requests (content-type)

Content-Type: application/json: the data in the request body is sent to the backend in the form of a json string

Content-Type: application/x-www-form-urlencoded: the data in the request body is sent to the backend in the form of a normal form (key-value pair)

Content-Type: multipart/form-data: it processes the data of the request body as a message, with the label as a unit and separated by a delimiter. You can upload both key-value pairs and files.

Now that we are familiar with the common request data formats, let's solve the problem we just encountered: the data type that the backend needs to accept is: application/x-www-form-urlencoded, how should we configure the front end:

Summary of common methods:

1. [passing parameters with URLSearchParams] the code is simple and convenient.

Let param = new URLSearchParams () param.append ('username',' admin') param.append ('pwd',' admin') axios ({method: 'post', url:' / api/lockServer/search', data: param})

You can see that the first approach I used in the project. > it should be noted that URLSearchParams does not support all browsers, but the overall support is still OK, so this simple and direct solution is preferred.

two。 Configure the content-type in the axios request header to the specified type

3.axios.defaults.headers.post ['Content-Type'] =' application/x-www-form-urlencoded'; or {headers: {'Content-Type':'application/x-www-form-urlencoded'}} `

4. Convert parameters to query parameters, using qs

Introduce qs, this library is included in axios and does not need to be downloaded.

Import Qs from 'qs'let data = {"username": "cc", "psd": "123456"} axios ({headers: {' Content-Type': 'application/x-www-form-urlencoded'}, method:' post', url:'/ api/lockServer/search', data: Qs.stringify (data)})

Well, we have solved the common application/x-www-form-urlencoded form of parameter transfer, so how to convert the latter two, let me tell you one by one.

Content-Type: multipart/form-data

For this type of data, we often upload personal images on the front-end page, and then click Save to send the back-end to modify the original data. Under the solution:

Let params = new FormData () params.append ('file', this.file) params.append (' id', localStorage.getItem ('userID')) params.append (' userName', this.name) params.append ('sex', this.sex) params.append (' mobile', this.phone) params.append ('email', this.email) params.append (' qq') This.qq) params.append ('weChat', this.WeChat) axios.post (URL, params) {headers: {'Content-Type':' multipart/form-data'}}) .then (res = > {if (res.data.code = 0) {this.$router.go (- 1)}}) .catch (error = > {alert ('failed to update user data' + error)})

You can see that I am using this method to achieve the effect of user image update.

Content-Type: application/json

This is the default request data type for axios, and we just need to serialize the json string and pass it without extra configuration.

These are all the contents of the article "how to configure the request header content-type for axios". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.