使用 axios get 请求发送对象 [英] Send object with axios get request

问题描述

我想发送一个带有对象的获取请求.对象数据将在服务器上用于更新会话数据.但是对象似乎没有正确发送，因为如果我尝试将其发送回打印出来，我只会得到:

I want to send a get request with an object. The object data will be used on the server to update session data. But the object doesn't seem to be sent correctly, because if I try to send it back to print it out, I just get:

" N; "

我可以像这样使用 jQuery 来完成它并且它有效:

I can do it with jQuery like this and it works:

 $.get('/mysite/public/api/updatecart', { 'product': this.product },  data => {     
              console.log(data);
           });

像这样从服务器用 laravel 发回对象:

The object is sent back from server with laravel like this:

public function updateCart(Request $request){
      return serialize($request->product);

同样的事情不适用于 axios:

The same thing doesn't work with axios:

axios.get('/api/updatecart', { 'product': this.product })       
                .then(response => {
                    console.log(response.data);
            });

我使用 axios 设置了默认 baseURL，因此 url 不同.它正确到达 api 端点，函数返回发送的内容，这显然不是对象.结果我只得到N;".

I set a default baseURL with axios so the url is different. It reaches the api endpoint correctly and the function returns what was sent in, which was apparently not the object. I only get "N; " as result.

推荐答案

Axios API 与 jQuery AJAX 有点不同.如果必须在 GET 请求中传递一些参数，则需要使用 config 对象的 params 属性(.get() 方法):

Axios API is a bit different from the jQuery AJAX one. If you have to pass some params along with GET request, you need to use params property of config object (the second param of .get() method):

axios.get('/api/updatecart', {
  params: {
    product: this.product
  }
}).then(...)

您可以将普通对象或 URLSearchParams 对象作为 params 值传递.

You can pass either a plain object or a URLSearchParams object as params value.

请注意，这里我们讨论的是附加到 URL 的参数(查询参数)，文档中明确提到了这一点.

Note that here we're talking about params appended to URL (query params), which is explicitly mentioned in the documentation.

如果您想通过 GET 请求在请求 body 中发送某些内容，params 将不起作用 - data 也不会，因为它是仅考虑 PUT、POST、DELETE 和 PATCH 请求.有 几个 冗长 讨论这个功能，这里是有说服力的报价:

If you want to send something within request body with GET requests, params won't work - and neither will data, as it's only taken into account for PUT, POST, DELETE, and PATCH requests. There're several lengthy discussions about this feature, and here's the telling quote:

不幸的是，这似乎不是 axios 问题.问题似乎在于浏览器中的 http 客户端实现JavaScript 引擎.

Unfortunately, this doesn't seem to be an axios problem. The problem seems to lie on the http client implementation in the browser javascript engine.

根据文档和规范 XMLHttpRequest 忽略如果方法是 GET，则为请求的正文.如果你执行一个使用 XMLHttpRequest 在 Chrome/Electron 中请求并且您尝试放置一个发送方法中的 json 主体，这会被忽略.

According to the documentation and the spec XMLHttpRequest ignores the body of the request in case the method is GET. If you perform a request in Chrome/Electron with XMLHttpRequest and you try to put a json body in the send method this just gets ignored.

使用 fetch 也是 XMLHtppRequest 的现代替代品似乎在 Chrome/Electron 中失败了.

Using fetch which is the modern replacement for XMLHtppRequest also seems to fail in Chrome/Electron.

在修复之前，浏览器中唯一的选择是在数据不适合该查询字符串时使用 POST/PUT 请求.显然，该选项只有在可以修改相应的 API 时才可用.

Until it's fixed, the only option one has within a browser is to use POST/PUT requests when data just doesn't fit into that query string. Apparently, that option is only available if corresponding API can be modified.

然而，GET-with-body 最突出的例子——ElasticSearch _search API——实际上支持 GET 和 POST；后者似乎远不如应该的那样为人所知.这是相关的 SO 讨论.

However, the most prominent case of GET-with-body - ElasticSearch _search API - actually does support both GET and POST; the latter seems to be far less known fact than it should be. Here's the related SO discussion.

这篇关于使用 axios get 请求发送对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！