【Axios】常用请求方法和请求配置详解

Axios 是一个基于 Promise 的 HTTP 库，广泛应用于前端项目中与后端进行数据通信。它不仅可以发送 GET、POST 请求，还支持配置请求的各种选项如请求头、超时、拦截器等。本文将详细介绍 Axios 的常用请求方法和配置选项，帮助开发者灵活运用它来处理各种 HTTP 请求。

一、Axios 概述

1. 什么是 Axios？

Axios 是一个流行的 HTTP 客户端，用于浏览器和 Node.js。它的最大特点是基于 Promise，方便处理异步操作。此外，它还支持请求和响应的拦截、取消请求、自动转换 JSON 数据等功能。Axios 常用于前端与 RESTful API 通信。

2. Axios 的安装

可以通过 npm 或 yarn 安装 Axios：

# 使用 npm
npm install axios

# 使用 yarn
yarn add axios

安装完成后即可在项目中引入并使用：

import axios from 'axios';

二、Axios 常用请求方法

1. GET 请求

GET 请求用于从服务器获取数据。Axios 使用非常简单，只需调用 axios.get() 方法即可发起 GET 请求。

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

传递参数

在 GET 请求中，可以通过配置对象传递查询参数，Axios 会自动将对象转为 URL 查询字符串：

axios.get('/api/users', {
  params: {
    id: 1,
    name: 'John'
  }
})
  .then(response => {
    console.log(response.data);
  });

2. POST 请求

POST 请求通常用于向服务器发送数据，例如表单提交或创建新资源。使用 axios.post() 方法可以方便地发送 POST 请求：

axios.post('/api/users', {
  name: 'John',
  age: 30
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在此例中，数据会作为请求体发送到服务器。

3. PUT 请求

PUT 请求用于更新现有资源。与 POST 类似，axios.put() 也会将数据放在请求体中。

axios.put('/api/users/1', {
  name: 'Jane',
  age: 25
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

4. DELETE 请求

DELETE 请求用于删除指定资源。axios.delete() 方法可以轻松发起删除请求：

axios.delete('/api/users/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

三、Axios 请求配置

1. 基本配置

Axios 支持在请求中自定义配置，主要通过一个配置对象来传递各种选项：

axios({
  method: 'get', // 请求方法
  url: '/api/users', // 请求 URL
  params: { id: 1 }, // 查询参数
  headers: { 'Authorization': 'Bearer token' }, // 自定义请求头
  timeout: 5000 // 超时时间（毫秒）
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

2. 请求头配置

在需要身份验证或发送特殊数据时，配置请求头非常重要。可以在请求配置中使用 headers 属性来自定义请求头：

axios.get('/api/users', {
  headers: {
    'Authorization': 'Bearer my-token',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  });

3. 设置超时时间

通过 timeout 选项可以设置请求的最大响应时间，超时将触发错误：

axios.get('/api/users', { timeout: 1000 }) // 设置 1 秒超时
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Request timed out:', error);
  });

4. 使用 Axios 实例

在大型项目中，可能需要多次发送不同配置的请求。此时可以创建 Axios 实例并为其设置默认配置：

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'Authorization': 'Bearer my-token' }
});

apiClient.get('/users')
  .then(response => {
    console.log(response.data);
  });

通过这种方式，可以在不同请求间复用相同的配置。

四、拦截器的使用

Axios 提供了请求和响应拦截器，允许在请求或响应被处理之前对其进行修改。

1. 请求拦截器

请求拦截器可以在请求发送之前执行，例如为每个请求添加身份验证 token：

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer my-token';
  return config;
}, error => {
  return Promise.reject(error);
});

2. 响应拦截器

响应拦截器可以在服务器响应后执行，例如统一处理错误消息：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  console.error('Error response:', error);
  return Promise.reject(error);
});

五、取消请求

在某些场景下，如用户导航到其他页面时，需要取消未完成的请求。Axios 提供了取消请求的功能，通过 CancelToken 来实现：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/users', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      console.error(thrown);
    }
  });

// 取消请求
source.cancel('Operation canceled by the user.');

六、错误处理

在处理 HTTP 请求时，错误处理是必不可少的。Axios 提供了基于 Promise 的错误捕获机制，允许在 .catch() 方法中捕获错误：

axios.get('/api/users/999')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Error Response:', error.response.status);
    } else if (error.request) {
      console.error('No Response:', error.request);
    } else {
      console.error('Request Error:', error.message);
    }
  });

通过这种方式，可以有效处理各种类型的错误，如网络错误、超时错误或 HTTP 状态码错误。

七、总结

Axios 是一个功能强大、灵活的 HTTP 客户端，适用于各种前后端通信场景。通过掌握 GET、POST、PUT、DELETE 等常见请求方法，以及请求头、超时、拦截器、取消请求等高级功能，开发者可以轻松应对复杂的网络请求场景。在实际项目中，合理配置和使用 Axios，不仅能提高开发效率，还能有效提升应用的稳定性和用户体验。

推荐：

• JavaScript
• react
• vue

---