An article explains in detail the two ways of passing parameters in axios

axios Everyone knows very well that one can be used for either client or server to send http requests library. But it can sometimes be uncomfortable when jointly debugging front-end and back-end, so here I will make a summary. Hope it can help someone who is destined.

Parameter passing methods [Related recommendations: vue.js video tutorial]

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

get request

axios({
    method: 'GET',
    url: 'xxxxx',
    params: param,
  })
或者 
axios({
    method: 'GET',
    url: '/xxx?message=' + msg,
  })

post request

axios({
    method: 'POST',
    url: '/xxxxx',
    data: param,
  })
  或者
 axios({
    method: 'POST',
    url: '/xxxxx',
    params: param,
  })

Correct delivery

The solution to passing parameters is divided into post and get. Let’s take a look at it from here

<span style="background-color:#cccccc;">post</span>

post Most people will get it wrong. Let's take a look.

<span style="background-color:#cccccc;">data</span> The form

Speaking from the example, the case code used is the post parameter, and No transcoding is done.

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

Console results

What is passed using data is an object, which is seen in the console The words are request payload

##node The way to receive parameters in the background

Here I use the backend built by

koa. You need to use the koa-bodyparser plug-in to parse the parameters of body

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');
})

The acceptance method is as follows:

java The way to receive parameters in the background

I am not that familiar with java, but I know it. If you need to accept

axios parameters passed in data. You need to use the annotation @responseBody and use the entity class to receive it.

post data In the form, no matter which server-side language it is, parameters need to be obtained from body. Mainly used to pass object parameters. The data obtained in the background is an obj. Data in the form of data can do many things, File upload, Form submission etc.

params forms

This is passed in the form of an object. The case code is as follows:

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

Browser result analysis

View view sourcer as follows:

node The way to receive parameters in the background

Start the service and above The same, but the way of receiving parameters has changed a bit

java The way of receiving parameters in the background

This person If you can't do it, theoretically you can get the parameters from the address bar. You should also use the annotation @resquestParam

get request

get request No matter which method is used, the last parameter will be placed on the path. Using param only axios serializes this parameter for you and splices it into the url. If there is a reason, please check the following

There are two reasons

When encountering this problem, we need to look at the source code of

axios .Here we will only look at the part that handles parameters. If you are interested, check out the source code yourself.

Processing

data

In

core/dispatchRequest.js in the axios file, We can see that axois will data

In default.js of axios, there is a function that specifically converts data Parametric.

Note: The above is just an example of data passing parameters! In fact, data may also be spliced ​​on the address bar, or file upload, etc. There are too many, here I just explain how to use them.

Processing params

In adapt/ xhr.js in the axios file, We can see that axois will put the params parameters into the url path.

buildUrl Some key codes are as follows:

Summary

In fact, the front-end and back-end In the end-to-end connection parameter process, for post requests, if data does not work, then use params to pass it. If it does not work, there may be a problem with the backend. .

The above is the detailed content of An article explains in detail the two ways of passing parameters in axios. For more information, please follow other related articles on the PHP Chinese website!