用Axios发送POST JSON请求 |
您所在的位置：网站首页 › axios请求数据的方法 › 用Axios发送POST JSON请求 |
|
简介
Axios是一个基于承诺的HTTP客户端库，它使得向REST端点（主要是API）发送异步HTTP请求（如POST 、GET 、DELETE ）变得简单。 在这篇文章中，我们将学习如何用Axios发送POST JSON请求，以及如何处理之前的序列化和非序列化的数据。 如何使用Axios发送POST JSON请求POST请求是用来发送数据到一个端点的。例如，如果我们有一个注册页面，用户提交他们的信息，这些信息可以作为JSON发送到我们使用POST JSON请求指定的端点。 我们使用Axios的axios.post() 方法来发送POST请求，该方法需要两个主要参数--端点的URL（url ），以及代表我们想要发布的数据的对象（data ）。 axios.post(url[, data[, config]])除了这两个参数，还有第三个参数--config 。它被用来配置我们要发送的POST请求，主要是设置头文件。 发送未序列化的数据需要注意的是，Axios默认使用JSON来发布数据，这意味着我们传递给Axios的任何对象都会自动将对象序列化为JSON，并将Content-Type 头部设置为application/json 。让我们在例子中说明一下--假设我们发布的对象是{ name: 'John Doe' } 。 const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });Axios会自动将该对象序列化为JSON格式。 console.log(result.data.data); // '{"name":"John Doe"}'而且正如我们所说的，它还会将我们的Content-Type 头部设置为application/json 。 console.log(result.data.headers['Content-Type']); // 'application/json;' 发送序列化的JSON字符串到目前为止，我们已经看到Axios会自动序列化我们发送的任何数据，但在这种情况下，我们将发送一个序列化的JSON字符串作为axios.post() 方法的第二个参数。 const usersName = JSON.stringify({ name: 'John Doe' });Axios会简单地把这个数据当作一个表单编码的请求体，而不是把内容类型头设置为application/json ，如下图所示。 const usersName = JSON.stringify({ name: 'John Doe' }); const result = await axios.post('https://testapi.org/post', usersName); console.log(result.data.headers['Content-Type']); // 'application/x-www-form-urlencoded',为了解决这个问题，我们需要明确地将Content-Type 头部设置为application/json 。我们可以通过在调用axios.post() 方法时传递config 参数来做到这一点。 const usersName = JSON.stringify({ name: 'John Doe' }); customConfig = { headers: { 'Content-Type': 'application/json' } }; const result = await axios.post('https://testapi.org/post', usersName, customConfig); console.log(result.data.data); // '{"name":"John Doe"}' console.log(result.data.headers['Content-Type']); // 'application/json', 结论在这篇文章中，我们学习了如何用Axios发送POST JSON请求，充分意识到这些数据可能是序列化的，也可能是非序列化的，我们处理了两种情况。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |