Axios에서 매개변수를 전달하는 두 가지 방법에 대해 자세히 설명하는 기사가 있습니다.

axios http 요청 라이브러리를 보내기 위해 클라이언트 또는 서버에 사용할 수 있다는 것은 누구나 잘 알고 있습니다. . 하지만 프런트엔드와 백엔드를 공동으로 디버깅할 때 때로는 불편할 수 있으므로 여기에서 요약하겠습니다. 운명이 정해져 있는 사람에게 도움이 되기를 바랍니다. axios 大家都非常的清楚，一个既可以用于客户端或者 服务端发送http请求的库。但是在前后端联调的时候有的时候会很难受，所以这里我来做一个总结。希望能帮助到有缘人。

参数的传递方式【相关推荐：vue.js视频教程】

参数传递一般有两种，一种是 使用 params, 另一种是 data的方式,有很多的时候我们看到的前端代码是这样的 

get 请求

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

post 请求

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

正确传递

传递参数的解决办法分为post和get,咋们从这里来看一下 

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

post 是大多数人会搞错的，咋们来看看。 

 <span style="background-color:#cccccc;">data</span> 的形式

从例子中说话，使用的案例代码是post参数，并且没有做任何的转码。 

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

 控制台结果

 使用data传递的是一个对象，在控制台中看到的话是 request payload 

node 后台接收参数的方式 

这里我采用的是koa 来搭建的后台。需要使用 koa-bodyparser 这个插件来解析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');
})

接受方式如下：

java 后台接收参数的方式

对于 java 来说，本人并不是那么熟悉，但是知道的是。如果需要接受axios 以data 传递的参数。需要使用注解 @responseBody 并且使用的是实体类来接收的.

post data 的形式 ，不管是 哪种服务端的语言，都需要从body中获取参数。主要用于 传递 对象的参数，后台拿到的数据是一个 obj。 data 形式的数据有可以做好多事情， 文件上传，表单提交 等

params 的形式

这个是一个对象形式传递的，案例代码如下：

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

浏览器结果分析

查看view sourcer 如下：

node 后台接收参数的方式

启动服务和上面一样，但是接收参数的方式有点变化

java 后台接收参数的方式

这个本人搞不来 ，理论上是从地址栏上获取参数。应该也是 可以使用注解 @resquestParam吧

get 请求

get 请求不管使用哪种方式，最后的参数都会放到路径上。 使用param 只是axios帮你把这个参数进行了序列化，并且拼接在 url上面。原因的话，请查看下面

出现两种的原因

遇到这个问题，咋们就需要去看 axios 的源码了.这里 只会看处理参数的部分。有兴趣的自己去查看源码。

处理data

在axios文件中 的 core/dispatchRequest.js 中，我们可以看到 ，axois会 data

매개변수 전달 방법 [관련 권장사항: vue.js 동영상 튜토리얼 a >】🎜🎜🎜매개변수를 전달하는 방법에는 일반적으로 두 가지가 있습니다. 하나는 params를 사용하는 것이고, 다른 하나는 data를 사용하는 것입니다. 코드는 이렇습니다 🎜🎜get request🎜rrreee🎜post request🎜rrreee🎜올바르게 전달되었습니다🎜🎜🎜매개변수 전달에 대한 해결책은 post와 get으로 나누어져 있으니 여기서 살펴보겠습니다🎜 🎜<span style="Background-color:#cccccc;">게시물</span> span> 🎜🎜🎜post는 대부분의 사람들이 틀리는 부분입니다. 한번 살펴보겠습니다. 🎜🎜 <span style="Background-color:#cccccc;">데이터</span> 양식🎜🎜 사례를 사용하여 이야기해 보겠습니다. code는 게시 매개변수이며 트랜스코딩이 수행되지 않습니다. 🎜

🎜rrreee 🎜 콘솔 결과🎜

🎜🎜🎜 데이터를 사용하여 전달되는 것은 콘솔에서 볼 때 요청 페이로드 🎜

🎜🎜노드 수신 방법 백그라운드 매개변수 🎜🎜🎜여기서는 koa를 사용하여 백엔드를 구축합니다. body의 매개변수를 구문 분석하려면 koa-bodyparser 플러그인을 사용해야 합니다. 🎜rrreee🎜수락 방법은 다음과 같습니다. 🎜

🎜

java 백그라운드에서 매개변수 수신 방법

🎜🎜저는 Java에 대해 그다지 익숙하지는 않지만 알고 있습니다. data와 함께 axios가 전달한 매개변수를 허용해야 하는 경우. @responseBody 주석을 사용하고 이를 수신하려면 엔터티 클래스를 사용해야 합니다.🎜

🎜🎜🎜포스트 데이터 형식, 어떤 서버 언어를 사용하든 관계없이 필요합니다. body에서 매개변수 가져오기부터 시작합니다. 주로 객체 매개변수를 전달하는 데 사용됩니다. 백그라운드에서 얻은 데이터는 obj입니다. 데이터 형식의 데이터는 파일 업로드, 양식 제출 등 다양한 작업을 수행할 수 있습니다. 🎜

매개변수 format h3>🎜객체 형태로 전달됩니다. 케이스 코드는 다음과 같습니다.🎜

🎜rrreee

브라우저 결과 분석

🎜🎜다음과 같이 뷰 소스를 봅니다:🎜

🎜

node 백그라운드에서 파라미터 수신

🎜🎜서비스 시작 방법은 위와 동일하지만, 파라미터 수신 방법이 살짝 다릅니다🎜

🎜

java code> 백그라운드에서 매개변수를 받는 방법

🎜🎜이것을 알 수 없습니다. 자, 이론적으로 매개변수는 주소 표시줄에서 가져옵니다. @resquestParam🎜

get request

🎜🎜get request 주석도 사용해야 합니다. 어떤 방법을 사용하든 마지막 매개변수가 경로에 배치됩니다. param을 사용한다는 것은 axios가 이 매개변수를 직렬화하고 이를 URL에 연결한다는 것을 의미합니다. 그 이유는 아래에서 확인해주세요🎜

두 가지 이유가 있습니다

🎜🎜이 문제가 발생하면 axios의 소스 코드를 살펴봐야 합니다. 처리 매개변수에 대한 부분만 살펴보겠습니다. 관심이 있으시면 소스코드를 직접 확인해 보세요. 🎜

데이터

처리🎜🎜 axios 파일의 core/dispatchRequest.js에서 우리는 다음과 같이 합니다. 보시다시피, axois는 데이터🎜입니다.

axios의 default.js에는 data 매개변수를 구체적으로 변환하는 함수가 있습니다. axios 的 default.js 中，有一个函数专门转换 data 参数的 。

注意： 上面只是举例 data 传递参数的一种情况哈！其实data 也有在地址栏 上 拼接的情况，或者 是文件上传的等情况。太多了，这里 只是讲清楚使用的方式。

处理 params

在axios文件中 的 adapt/ xhr.js 中，我们可以看到 ，axois会 params的参数放到url路径中。

buildUrl 一些关键代码如下 ：

总结

其实前端和后端 对接参数过程，对于post请求，data 不行，那就使用 params

🎜🎜🎜🎜참고: 위의 내용은 매개변수를 전달하는 data의 예일 뿐입니다! 실제로 주소 표시줄에도 데이터가 엮여 있거나, 파일이 업로드되어 있습니다. 너무 많아서 여기서는 사용법만 설명하겠습니다. 🎜🎜

params

처리 중🎜🎜 axios 파일의 adapt/ xhr.js에서 axois는 params 매개변수를 url 경로에 넣습니다. 🎜🎜🎜🎜🎜buildUrl 일부 키 코드는 다음과 같습니다. 🎜🎜 🎜

요약

🎜In 실제로 프런트엔드 및 백엔드 도킹 매개변수 프로세스에서 post 요청의 경우 data가 작동하지 않는 경우 params를 사용하여 통과하지 못하면 결국 문제가 있을 수 있습니다. 🎜

위 내용은 Axios에서 매개변수를 전달하는 두 가지 방법에 대해 자세히 설명하는 기사가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!