如何使用Axios.js发送PUT请求？

理解 Axios 与 PUT 请求

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用，它能够执行各种 HTTP 请求，包括 GET、POST、PUT、DELETE 等，本文将详细介绍如何使用 Axios 发起一个 PUT 请求。

什么是 PUT 请求？

PUT 请求通常用于更新服务器上的资源，与 POST 请求不同，PUT 请求通常要求客户端提供完整的资源表示，以便服务器可以完全替换现有的资源。

安装 Axios

在使用 Axios 之前，你需要先进行安装，你可以通过 npm 或 yarn 来安装 Axios：

npm install axios

或者

yarn add axios

基本用法

下面是一个简单的例子，展示如何使用 Axios 发起一个 PUT 请求：

const axios = require('axios');
// 要更新的数据
const data = {
  name: 'John Doe',
  age: 30
};
axios.put('https://jsonplaceholder.typicode.com/users/1', data)
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error updating the data!', error);
  });

在上面的例子中，我们使用axios.put 方法向https://jsonplaceholder.typicode.com/users/1 发送了一个 PUT 请求，并传递了需要更新的数据，如果请求成功，我们将在控制台输出更新后的数据；如果请求失败，我们将输出错误信息。

设置请求头

你可能需要设置自定义的请求头，Content-Type 或认证信息，你可以在请求配置对象中设置这些头：

axios.put('https://jsonplaceholder.typicode.com/users/1', data, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here'
  }
})
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error updating the data!', error);
  });

处理响应数据

Axios 默认会将响应数据解析为 JSON，如果你需要以其他格式处理响应数据，可以使用responseType 选项：

axios.put('https://jsonplaceholder.typicode.com/users/1', data, {
  responseType: 'text'
})
  .then(response => {
    console.log('Raw text response:', response.data);
  })
  .catch(error => {
    console.error('There was an error updating the data!', error);
  });

取消请求

你可以使用CancelToken 来取消请求：

const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;
axios.put('https://jsonplaceholder.typicode.com/users/1', data, {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
})
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      console.error('There was an error updating the data!', thrown);
    }
  });
// 取消请求（如果在5秒内没有完成）
setTimeout(() => {
  cancel();
}, 5000);

超时设置

你还可以设置请求的超时时间：

axios.put('https://jsonplaceholder.typicode.com/users/1', data, {
  timeout: 1000 // 1秒超时
})
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error updating the data!', error);
  });

相关问题与解答

问题1：如何在 Axios PUT 请求中添加查询参数？

解答： 你可以在 URL 中直接添加查询参数，或者使用params 配置项：

axios.put('https://jsonplaceholder.typicode.com/users/1?param1=value1&param2=value2', data)
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error updating the data!', error);
  });

或者使用params 配置项：

axios.put('https://jsonplaceholder.typicode.com/users/1', data, {
  params: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error updating the data!', error);
  });

问题2：如何捕获 Axios PUT 请求的网络错误？

解答： 你可以使用catch 方法来捕获网络错误，并根据需要进行相应的错误处理：

axios.put('https://jsonplaceholder.typicode.com/users/1', data)
  .then(response => {
    console.log('Data updated successfully:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器响应了一个状态码，不在2xx的范围
      console.error('Error Response:', error.response.data);
      console.error('Error Status:', error.response.status);
      console.error('Error Headers:', error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('No Response Received:', error.request);
    } else {
      // 在设置请求时发生了一些事情，触发了一个错误
      console.error('Error Message:', error.message);
    }
    console.error('Config:', error.config);
  });

小伙伴们，上文介绍了“axios.js put”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。