Axios is well known as a library that can be used by either a client or a server to send HTTP requests. But sometimes it’s hard when you do back and forth, so here’s a summary. Hope to help people.

Parameter passing mode

There are two ways to pass parameters, one is to use params, the other is data, there are many times we see front-end code like this.

A get request

Axios ({method: 'GET', url: 'XXXXX ', params: param,}) or axios({method: 'GET', url: '/ XXX? message=' + msg, })Copy the code

A post request

{method: 'POST', URL: '/ XXXXX ', data: param,}) or axios({method: 'POST', URL: '/ XXXXX ', params: param,})Copy the code

Correct delivery

The solutions for passing parameters are post and GET. Let’s look at them here

post

Post is what most people get wrong, let’s see.

dataIn the form of

Speaking from the example, the case code used is the POST parameter, and no transcoding is done.

 method: 'POST',
    url: '/xxxxx',
    data: param,
  })
Copy the code

Console results

What is passed with data is an object that is seen in the console as the Request Payload

Parameter view sources are as follows:

nodeHow the background receives parameters

Here I used koA to build the background. You need to use the plugin koa-BodyParser to parse the body arguments

import Koa from 'koa';
import bodyParser from 'koa-bodyparser'
const app = new Koa();


app.use(bodyParser());

app.listen(9020, () => {
  console.log('the server is listen 9020 port');
})
Copy the code

The ways of acceptance are as follows:

javaHow the background receives parameters

For Java, I am not that familiar with, but know is. If you need to acceptaxios 以dataParameter passed. You need to use annotations@responseBodyAnd use the entity class to receive it.



post dataRegardless of the language of the server, you need to use thebodyTo obtain parameters. It is mainly used to pass the parameters of the object. The data obtained in the background is aobj. Data in the form of data can do a lot of things,File upload.The form submission 等

paramsIn the form of

This is passed as an object, and the case code is as follows:

 axios({
    method: 'POST',
    url: '/xxxxx',
    params: param,
  })
Copy the code

Browser Result Analysis

View the view sourcer as follows:

nodeHow the background receives parameters

Starting the service is the same as above, but the way the parameters are received is slightly different

javaHow the background receives parameters

I can’t figure this out, but the theory is to get the parameter from the address bar. You can also use the annotation @resquestparam

A get request

Either way a GET request is used, the last parameter is placed on the path. Using param just means that Axios serializes the parameter and concatenates it to the URL. For reasons, see below

There are two reasons for this

When confronted with this problem, you need to look at the source code of Axios. I’m only going to look at the part that deals with parameters. Interested to see their own source.

To deal withdata

In the Core /dispatchRequest.js file in axios, we can see that the axois data

在 axios 的 default.js, there is a function dedicated to the conversiondataThe parameters.

Note: This is only an example of data passing arguments. In fact, data can also be spliced in the address bar, or file upload, and so on. There are too many, but this is just a way to make it clear.

To deal withparams

In adapt/ xhr.js in the Axios file, we can see that the axois puts the parameters of params in the URL path.

BuildUrl some key code:

conclusion

In fact, the front end and the back end interconnect parameter process, for post request, data is not available, then use params to pass, if both fail, that may be a problem in the back end.

eggs

Background test data is availablepostmanIf passable parameters can be called through.postmanIs the way you can see the requested code.

This article uses the Article Synchronization Assistant to synchronize