乐趣区

关于axios:掌握-Axios-的-put-请求实现数据更新的最佳方式

jiezi

在前端开发中，咱们常常须要与后端服务器进行数据交互。其中，PUT 申请是一种罕用的办法，用于向服务器发送更新或批改数据的申请。通过发送 PUT 申请，咱们能够更新服务器上的资源状态。

Axios 是一个风行的 JavaScript 库，用于在浏览器和 Node.js 中进行 HTTP 申请。它提供了简略易用的 API，使得发送 PUT 申请变得非常便捷。在本文中，咱们将探讨 Axios 的 PUT 申请应用办法，并介绍不同的传参写法。

Axios PUT 申请的应用办法

Axios 的应用前提是在我的项目中装置了 Axios。如果你还未装置，能够通过以下命令装置：

npm install axios

或

yarn add axios

接下来，咱们就能够在代码中引入并应用 Axios 进行 PUT 申请。

首先，在你的 JavaScript 文件中，应用以下形式引入 Axios：

import axios from 'axios';

而后，咱们能够通过 Axios 的 put 办法来发送 PUT 申请。上面是根本的应用形式：

axios.put(url, data, config)
  .then(response => {// 申请胜利后的解决})
  .catch(error => {// 申请失败后的解决});
  • url: 要发送 PUT 申请的服务器端地址。
  • data: 要发送的数据，通常是一个 JavaScript 对象，会被转换成 JSON 格局发送到服务器端。
  • config: 可选参数，用于设置申请的配置，如申请头等。

罕用的传参写法

接下来，咱们将介绍几种常见的传递参数的写法。

1. 在 URL 中传递参数

能够将参数间接拼接在 URL 中，这是最常见的传参形式：

const userId = 123;
const newData = {
  name: 'John Doe',
  age: 30
};

axios.put(`/api/users/${userId}`, newData)
  .then(response => {// 申请胜利后的解决})
  .catch(error => {// 申请失败后的解决});

在上述例子中，咱们将 userId 间接拼接在 URL 的开端，将 newData 作为申请体发送给服务器。

2. 应用 URL 参数

能够应用 Axios 提供的 params 参数来传递 URL 参数：

const userId = 123;
const newName = 'John Doe';

axios.put('/api/users', null, {
  params: {
    id: userId,
    name: newName
  }
})
  .then(response => {// 申请胜利后的解决})
  .catch(error => {// 申请失败后的解决});

在上述例子中，咱们将参数作为一个对象传递给 params，Axios 会将其拼接在 URL 前面。

3. 应用申请体传递参数

除了上述两种形式，咱们还能够将数据作为申请体传递：

const userData = {
  id: 123,
  name: 'John Doe',
  age: 30
};

axios.put('/api/users', userData)
  .then(response => {// 申请胜利后的解决})
  .catch(error => {// 申请失败后的解决});

在这种形式中，咱们间接将参数对象 userData 作为第二个参数传递给 put 办法。

实际案例

当初，让咱们通过一个实际案例来进一步理解如何应用 Axios 的 PUT 申请。

1. 装置 json-server

首先，你须要在我的项目目录下应用 npm 或 yarn 装置 json-server。

npm install -g json-server

而后，在我的项目目录下创立一个 JSON 文件，用于模仿你的数据。假如你要模仿的数据是用户数据，能够创立一个名为 users.json 的文件，并在其中定义用户数据。users.json 文件内容示例：

{
  "users": [{ "id": 1, "name": "Alice", "age": 25},
    {"id": 2, "name": "Bob", "age": 30}
  ]
}

最初，在终端中运行以下命令，以启动 json-server 并指定模仿数据文件：

json-server --watch users.json --port 3000

这将启动一个模仿服务器，并监听端口 3000，应用 users.json 文件中的数据作为模仿的资源，如图所示：

2. 发送 put 申请

下面的 json-server 提供的路由能够为：

  • PUT http://localhost:3000/users/:userId 首先，在 IDE 编辑器中创立一个新的 JavaScript 文件（例如，putUser.js），而后粘贴以下代码，并用 node putUser.js 命令在控制台运行。
const axios = require('axios');

const userId = 2; // 要批改的用户 id
const updatedData = {name: 'Updated Name', age: 35};

axios.put(`http://localhost:3000/users/${userId}`, updatedData)
.then(response => {console.log('User updated:', response.data);
})
.catch(error => {console.error('Error updating user:', error);
});

注：如果报错，请确保是否装置了 axios ，装置命令为 npm install axios

该脚本应用 Axios 来发送 PUT 申请至 http://localhost:3000/users/:id 地址，将 ID 为 2 的用户信息更新为 {name: 'Updated Name', age: 35}。

应用 Apifox 调试后端接口

Apifox = Postman + Swagger + Mock + JMeter，Apifox 反对调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协定的接口，并且集成了 IDEA 插件 。在后端人员写完服务接口时，测试阶段能够通过 Apifox 来校验接口的正确性，图形化界面极大的不便了我的项目的上线效率。

在本文的例子中，就能够通过 Apifox 来测试接口。新建一个我的项目后，在我的项目中抉择 “调试模式”，填写申请地址后即可疾速发送申请，并取得响应后果，上文的实际案例如图所示：

提醒、技巧与注意事项（续）

  • 应用适合的传参形式来发送 PUT 申请，依据你的需要抉择适合的形式，拼接在 URL 中、应用 params 参数或将数据作为申请体传递。
  • 对于较简单的申请，能够应用 Axios 的 config 参数来设置申请头、认证信息等。
  • 在实践中，依据后端 API 的具体情况，确保传递正确的参数和数据格式。
  • 应用 Promise 的 .then() 和 .catch() 办法来解决申请的胜利和失败状况，以及相应的数据处理。
  • 倡议在申请的 .catch() 中增加错误处理，防止出现未解决的异样。
  • 在解决申请时，能够依据服务器返回的状态码进行不同的解决，例如解决不同的谬误状况或胜利响应。
  • 应用开发者工具（如 Chrome 的开发者工具）来监督网络申请和响应，有助于调试和排查问题。

总结

Axios 是一个功能强大的 JavaScript HTTP 客户端库，能够不便地进行 PUT 申请，用于更新服务器上的资源状态。咱们能够通过拼接 URL、应用 params 参数或将数据作为申请体传递，来实现不同的传参形式。在实践中，须要依据后端 API 的要求来抉择适合的传参形式，并依据返回的状态码进行相应的解决。

常识扩大：

  • Axios 的 post 申请如何应用？传参写法有哪几种？
  • Axios 的 interceptors（拦截器）如何应用？

参考链接：

  1. Axios 官网文档：https://axios-http.com/docs/req_config
  2. Express 官方网站：https://expressjs.com/
  3. Chrome 开发者工具：https://developers.google.com/web/tools/chrome-devtools
退出移动版