使用 Axios 函数库进行网络请求的使用指南

本文将全面介绍如何使用 Axios 函数库进行网络请求。我们将通过实例、场景和案例来讲解 Axios 的安装、基本用法、配置方法、错误处理等内容，并展示其在前端开发中的实际应用。对于希望深入了解网络请求与数据交互的开发者来说，本文将是一个详细的入门与进阶指南。

简介

Axios 是一个基于 Promise 的 JavaScript 库，用于发起 HTTP 请求。它可以用于浏览器和 Node.js 环境中，广泛应用于前端开发中与后端服务的交互。与原生的 XMLHttpRequest 或 fetch API 相比，Axios 提供了更简洁、易用且功能强大的接口。通过它，我们可以轻松地发送 GET、POST、PUT、DELETE 等常见 HTTP 请求，处理请求和响应的拦截，支持请求取消、超时等高级特性。

本文将带领你一步步掌握 Axios 的使用方法，从最基础的网络请求开始，逐步深入到高级配置和常见的应用场景。

Axios 安装与引入

1. 安装

如果你在开发前端应用并使用模块化的构建工具（如 Webpack、Vite），可以通过 npm 或 yarn 安装 Axios。

bashCopy Code
npm install axios
# 或者
yarn add axios

对于前端浏览器环境，你还可以直接引入 CDN 版本：

htmlCopy Code
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 引入

安装完成后，可以在 JavaScript 文件中通过 import 或 require 来引入 Axios。

javascriptCopy Code
import axios from 'axios';

对于 Node.js 环境，则可以使用 require 语法：

javascriptCopy Code
const axios = require('axios');

Axios 基本用法

GET 请求

GET 请求是最常见的 HTTP 请求方法之一，通常用于从服务器获取数据。以下是一个使用 Axios 发送 GET 请求的示例：

javascriptCopy Code
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Response Data:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个例子中，我们通过 axios.get() 发送 GET 请求，获取指定 URL 的数据。请求成功后，通过 then 方法处理响应数据。若请求失败，则通过 catch 方法捕获并输出错误。

POST 请求

POST 请求通常用于向服务器提交数据。例如，当用户提交一个表单时，通常使用 POST 请求。

javascriptCopy Code
const data = {
  title: 'New Post',
  body: 'This is a new post.',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', data)
  .then(response => {
    console.log('Post Created:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在此示例中，我们使用 axios.post() 方法发送 POST 请求，并将数据作为第二个参数传递。请求成功后，返回的 response.data 包含服务器返回的响应数据。

PUT 请求

PUT 请求用于更新已有的资源，类似于 POST 请求，但通常用于更新操作，而 POST 是用于创建操作。

javascriptCopy Code
const updatedData = {
  id: 1,
  title: 'Updated Post Title',
  body: 'Updated content',
  userId: 1
};

axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedData)
  .then(response => {
    console.log('Updated Post:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

DELETE 请求

DELETE 请求用于删除指定资源。以下示例展示了如何使用 Axios 发送 DELETE 请求：

javascriptCopy Code
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Post Deleted:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

配置 Axios

全局配置

你可以为 Axios 设置全局配置，这样所有请求都将使用这些默认配置。例如，可以设置 baseURL、timeout 等配置：

javascriptCopy Code
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.timeout = 5000; // 设置请求超时为 5 秒

// 发送请求时无需再次指定基础 URL
axios.get('/posts')
  .then(response => {
    console.log('Posts:', response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

请求和响应拦截器

Axios 允许你在请求发送前或响应返回前进行拦截和处理。这对于统一处理认证、日志、错误处理等操作非常有用。

请求拦截器

请求拦截器允许你在请求发送之前对请求进行修改或添加公共的请求头等操作。例如，添加认证 token：

javascriptCopy Code
axios.interceptors.request.use(config => {
  // 添加 Authorization header
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

响应拦截器允许你在响应数据到达 .then() 或 .catch() 之前，统一处理响应数据或错误。例如，可以统一处理错误信息：

javascriptCopy Code
axios.interceptors.response.use(response => {
  // 统一处理响应数据
  return response.data;
}, error => {
  // 统一处理错误
  console.error('API Error:', error.response ? error.response.data : error.message);
  return Promise.reject(error);
});

取消请求

有时我们可能需要取消某个网络请求，Axios 提供了取消请求的功能。可以通过 CancelToken 来实现。

javascriptCopy Code
const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://jsonplaceholder.typicode.com/posts', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
}).then(response => {
  console.log('Response:', response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.error('Error:', error);
  }
});

// 取消请求
cancel('Request canceled by user.');

请求超时

Axios 也支持设置请求超时。当请求超过指定时间仍未完成时，Axios 会自动中止请求。

javascriptCopy Code
axios.get('https://jsonplaceholder.typicode.com/posts', { timeout: 3000 })
  .then(response => {
    console.log('Response:', response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timeout');
    } else {
      console.error('Error:', error);
    }
  });

错误处理

捕获错误

在 Axios 中，你可以通过 .catch() 来捕获请求过程中发生的错误。常见的错误包括网络错误、请求超时等。

javascriptCopy Code
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('Response Data:', response.data);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

错误响应处理

除了捕获请求过程中的错误外，你还可以根据不同的 HTTP 状态码来处理不同类型的错误。例如，401 错误表示认证失败，404 错误表示资源未找到。

javascriptCopy Code
axios.get('https://jsonplaceholder.typicode.com/posts/9999')
  .then(response => {
    console.log('Post:', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求发出后，服务器返回了响应
      if (error.response.status === 404) {
        console.error('Resource not found');
      }