使用axios发送get请求时如何发送对象

Question

我想使用对象发送一个get请求。服务器上将使用该对象数据来更新会话数据。但是由于如果我尝试将其发送回打印出来，就只会得到：

"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>作为结果。

- Galivan

---

你是否超过了查询字符串的最大长度？ - online Thomas

Answer 1

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

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

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

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

如果您想在GET请求中发送一些内容到请求正文中，“params”无法使用 - “data”也不行，因为它仅用于PUT、POST、DELETE和PATCH请求。关于此功能有几个 冗长的 讨论，以下是说明性的引用：

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

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

使用fetch替代XMLHttpRequest的现代方式似乎在Chrome / Electron中也失败了。

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

然而，GET-with-body 的最显著案例 - ElasticSearch 的 _search API - 实际上支持 GET 和 POST 两种方法；后者似乎比应有的知名度要低得多。这里是 相关的SO讨论。

- raina77ow

---

对我来说实际可行的方法是使用"data"代替"params"。我的示例使用async/await而不是then/catch: try { const res = await axios.get("/api/updatecart", { data: { product: this.product } }) } catch (error) { console.log(error) } - Telmo Trooper

@TelmoTrooper的方法对我来说真正有效，而原始答案实际上并没有将参数发送到请求体中。 - Marawan Okasha

实际上这并不起作用，params配置选项总是按照文档中指定的方式作为查询参数放入URL中。另外，我们可以查看其他方法，但它们中的任何一种都没有对我起作用。 - Filipe Bezerra de Sousa

@FilipeBezerradeSousa 感谢提供文档链接。我试图使用“data”进行纯文本主体的GET请求，但它没有起作用。不得不改写为POST请求。 - kuhr

当您执行此操作时，请确保传递“params”，因为它是配置对象的属性。请参阅config（AxiosRequestConfig）接口以获取更多选项。 - jossie