学习使用 Axios 进行 API 请求：2024 年综合指南

在当今互联互通的网络环境中，客户端和服务器之间的高效数据交换至关重要。Axios 是一个强大的 JavaScript 库，它彻底改变了开发者处理 HTTP 请求的方式。无论您是构建简洁的单页应用，还是构建强大的后端服务，Axios 都能简化 API 交互，让您的代码更简洁、更易于维护。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可在浏览器和 Node.js 环境中无缝运行。它提供了直观的 API，用于对 Web 资源执行 CRUD（创建、读取、更新、删除）操作，支持所有标准 HTTP 方法：GET、POST、PUT、DELETE、PATCH、HEAD 和 OPTIONS。

Axios 的主要功能

基于 Promise：利用 JavaScript Promises 实现干净、异步的代码。
浏览器和 Node.js 支持：可在多种环境中工作。
自动转换：转换请求和响应数据。
拦截器：允许自定义处理请求和响应。
错误处理：提供详细的错误信息。
请求取消：提供取消请求的功能。
TypeScript 支持：包括 TypeScript 定义。

Axios 入门

首先，使用 npm 安装 Axios：

npm install axios

然后，将其导入到您的项目中：

import axios from 'axios';

使用 Axios 发出请求

让我们探索如何使用 Axios 进行不同类型的 HTTP 请求：

GET 请求

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

POST 请求

const data = { name: 'John Doe', email: 'john@example.com' };

axios.post('https://api.example.com/users', data)
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

PUT 请求

const updatedData = { name: 'Jane Doe' };

axios.put('https://api.example.com/users/1', updatedData)
  .then(response => {
    console.log('User updated:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

删除请求

axios.delete('https://api.example.com/users/1')
  .then(response => {
    console.log('User deleted:', response.data);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

高级 Axios 功能

请求配置

Axios 允许您使用各种选项自定义请求：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  timeout: 1000,
  withCredentials: true
})
.then(response => {
  console.log(response);
})
.catch(error => {
  console.error(error);
});

拦截器

拦截器允许您在或处理请求或响应之前拦截then它们catch：

// Add a request interceptor
axios.interceptors.request.use(
  config => {
    // Do something before request is sent
    return config;
  },
  error => {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
axios.interceptors.response.use(
  response => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    return response;
  },
  error => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    return Promise.reject(error);
  }
);

错误处理

Axios 提供详细的错误信息，使调试更加容易：

function App() {
  const handleClick = () => {
    axios.get('https://api.example.com/data')
      .then(response => {
        console.log(response.data); // Handle success
      })
      .catch(error => {
        if (error.response) {
          // Server responded with a status code outside the 2xx range
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // Request was made but no response received
          console.log(error.request);
        } else {
          // Something happened in setting up the request
          console.log('Error', error.message);
        }
        console.log(error.config); // Request config
      });
  };

  return (
    <button onClick={handleClick}>Click me to Test Error Handling</button>
  );
}

export default App;

结论

Axios 是一款强大的 JavaScript HTTP 请求工具。无论您是获取数据、提交表单还是处理错误，Axios 都能通过其简洁高效的 API 简化这些任务。了解如何有效地使用 Axios，可以提升代码的质量和可维护性，确保与 API 的顺畅交互。

将 Axios 纳入您的下一个项目并体验使用这个多功能库轻松处理 HTTP 请求！

文章来源：https://dev.to/vyan/learning-api-requests-with-axios-a-compressive-guide-for-2024-37li