使用axios获取请求发送对象[重复]

Question

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

" N; "

我可以像这样使用 jQuery 来做到这一点，而且效果很好：

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

使用 laravel 从服务器发回对象，如下所示：

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

同样的事情不适用于 axios：

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

我用 axios 设置了一个默认的 baseURL，所以 url 是不同的。它正确地到达 api 端点并且函数返回发送的内容，这显然不是对象。结果我只得到“N;”。

Answer 1

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

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

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

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

如果您想通过 GET 请求在请求 body 中发送某些内容，params 将不起作用 - data 也不起作用，因为它仅用于 PUT、POST、DELETE , 和 PATCH 请求。有 several lengthy discussions 关于这个功能，这是有说服力的报价：

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

根据文档和规范 XMLHttpRequest 忽略 如果方法是 GET，则请求正文。如果你执行一个 使用 XMLHttpRequest 在 Chrome/Electron 中请求，然后您尝试放置一个 send 方法中的 json 正文，这将被忽略。

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

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

然而，GET-with-body 最突出的案例 - ElasticSearch _search API - 实际上确实支持 GET 和 POST；后者似乎远不如应有的那样为人所知。这是related SO discussion。