技术

Axios 基础教程

Axios 是前端常用的 HTTP 请求库，基于 Promise 设计，用法简单、兼容性好，能轻松实现数据的获取与提交。

一、Axios 作用

向服务器发送 GET（获取数据）、POST（提交数据）等请求

自动把服务器返回的 JSON 数据转成 JavaScript 对象

处理请求中的错误（如网络问题、服务器报错）

支持浏览器和 Node.js 环境（本教程以浏览器端为主）

二、搭建 Axios 环境

要使用 Axios，首先需要把它引入到项目中，推荐两种简单方式：

方式 1：CDN 引入

无需下载安装，直接在 HTML 文件中添加一行代码，通过网络加载 Axios：

<!-- 在 <body> 标签内、自己的 JS 代码之前引入 -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.8/dist/axios.min.js"></script>
<!-- 引入后，全局就有了 axios 变量，直接用即可 -->
<script>
  // 这里写你的 Axios 代码
  console.log(axios); // 打印 axios 对象，验证是否引入成功
</script>

方式 2：npm 安装

如果用 Vue、React 等框架，先通过包管理器安装，再引入使用：

# 打开终端，在项目文件夹中执行
npm install axios --save

安装后在 JS 文件中引入：

// Vue/React 组件中引入
import axios from 'axios';

三、发送 HTTP 请求

Axios 最常用的是 GET（获取数据） 和 POST（提交数据） 请求，下面分别讲基础用法。

1. GET 请求

常用于获取列表、详情等数据。

无参数的 GET 请求

// 向服务器的 "/users" 接口请求用户列表
axios.get('https://api.example.com/users')
    .then(function (response) {
        // 请求成功：response 是服务器返回的所有信息
        console.log('获取到的用户列表：', response.data); // data 是核心数据（自动转成 JS 对象）
        console.log('请求状态码：', response.status); // 200 表示请求成功
    })
    .catch(function (error) {
        // 请求失败：如网络断了、接口不存在
        console.error('获取数据失败：', error.message);
    });

带参数的 GET 请求

通过 params 传参数：

axios.get('https://api.example.com/users', {
        params: {
            page: 1,
            limit: 10
        }
    })
    .then(function (response) {
        console.log('第 1 页用户列表：', response.data);
        // 实际请求的 URL 会自动拼接成：https://api.example.com/users?page=1&limit=10
    })
    .catch(function (error) {
        console.error('请求失败：', error.message);
    });

2. POST 请求

常用于提交表单、创建数据（如用户注册、发布评论）。

提交 JSON 格式数据

Axios 会自动把 JS 对象转成 JSON，无需手动处理：

// 要提交的数据
const userData = {
  username: 'xiaoming',
  password: '123456',
  email: 'xiaoming@example.com'
};

// 向 "/register" 接口提交注册数据
axios.post('https://api.example.com/register', userData)
  .then(function(response) {
    console.log('注册结果：', response.data);
    if (response.data.code === 200) {
      alert('注册成功！');
    }
  })
  .catch(function(error) {
    console.error('注册失败：', error.message);
    alert('注册失败，请重试！');
  });

提交表单格式数据

如果后端要求接收 key=value 格式的表单数据（如传统 HTML 表单），用 URLSearchParams 处理：

// 创建表单数据对象
const formData = new URLSearchParams();
formData.append('username', 'xiaoming');
formData.append('password', '123456');

// 发送 POST 请求
axios.post('https://api.example.com/register', formData)
  .then(function(response) {
    console.log('注册成功：', response.data);
  })
  .catch(function(error) {
    console.error('注册失败：', error.message);
  });

四、响应结果

请求成功后，then 里的 response 对象包含服务器返回的所有信息，常用属性：

属性	说明	示例值
response.data	服务器返回的核心数据（自动转 JS 对象）	{ code: 200, data: [...] }
response.status	HTTP 状态码（200 成功，404 找不到接口）	200
response.headers	服务器返回的响应头	{ 'content-type': 'application/json' }

示例：

axios.get('https://api.example.com/users/1');
  .then(function(response) {
    console.log('响应数据：', response.data); // {...}
    console.log('状态码：', response.status); // 200
    console.log('响应头类型：', response.headers['content-type']); // application/json
  });

五、处理错误

请求失败时（如网络错误、服务器报错），错误会进入 catch 方法，常见错误场景：

网络问题：断网、服务器未开启

接口错误：接口地址写错（404）、服务器内部错误（500）

业务错误：用户名已存在、密码错误

基础错误处理示例：

axios.post('https://api.example.com/login', {
  username: 'xiaoming',
  password: 'wrong123' // 错误密码
})
.then(function(response) {
  console.log('登录成功：', response.data);
})
.catch(function(error) {
  // 1. 有响应（如 400 错误，服务器返回了错误信息）
  if (error.response) {
    console.error('服务器返回错误：', error.response.data.message); // 如 "密码错误"
    console.error('错误状态码：', error.response.status); // 400
  } 

  // 2. 无响应（如断网、接口不存在）
  else if (error.request) {
    console.error('无响应：', '网络问题或接口不存在');
  } 

  // 3. 请求配置错误（如代码写错）
  else {
    console.error('请求配置错误：', error.message);
  }
});

六、简化代码

then/catch 是 Promise 的传统写法，用 async/await 能让代码更像同步逻辑，更易读（需要配合 try/catch 处理错误）：

示例：

// 必须在 async 函数中使用 await
async function getUserList() {
  try {
    // 等待请求完成，直接拿到 response 对象
    const response = await axios.get('https://api.example.com/users', {
      params: { page: 1, limit: 10 }
    });

    // 请求成功，处理数据
    console.log('用户列表：', response.data);
    return response.data;
  } catch (error) {
    // 请求失败，捕获错误
    console.error('获取用户列表失败：', error.message);
    throw error; // 可选：把错误抛出去，让调用者处理
  }
}

// 调用 async 函数
getUserList();

七、基础配置

1. 全局基础 URL

如果所有请求都用同一个域名（如 https://api.example.com），可以设置全局基础 URL，后续只需写相对路径：

// 设置全局基础 URL
axios.defaults.baseURL = 'https://api.example.com';

// 后续请求只需写相对路径
axios.get('/users') // 实际请求：https://api.example.com/users
  .then(function(response) {
    console.log('用户列表：', response.data);
  });

axios.post('/register', userData) // 实际请求：https://api.example.com/register
  .then(function(response) {
    console.log('注册结果：', response.data);
  });

2. 设置请求超时

如果服务器响应慢，可设置超时时间（单位：毫秒），超时后自动报错：

// 设置全局超时时间：5 秒（5000 毫秒）
axios.defaults.timeout = 5000;

// 超时后会进入 catch 方法
axios.get('/slow-api')
  .catch(function(error) {
    console.error('请求超时：', error.message); // 提示 "timeout of 5000ms exceeded"
  });

八、常见问题

跨域错误：浏览器控制台提示 Access to XMLHttpRequest at ... from origin ... has been blocked by CORS policy

解决：这是浏览器的安全限制，需要后端配置 CORS（允许你的前端域名访问），前端无法单独解决。

数据没拿到，控制台报 404：

检查接口地址是否写错（如 https://api.example.com/user 写成 https://api.example.com/users），或后端接口未部署。

POST 请求提交后，后端没收到数据：

确认数据格式是否符合后端要求（是 JSON 还是表单格式），如果是表单格式，用 URLSearchParams 处理（见 POST 部分示例）。

九、总结

Axios 基础用法核心就是：

引入 Axios（CDN 或 npm）

用 axios.get() 或 axios.post() 发送请求

用 then 处理成功结果，catch 处理错误（或用 async/await + try/catch）

简单配置全局基础 URL 和超时，提升效率

掌握这些基础操作，就能满足大部分前端请求场景啦！

如果觉得文章对你有用，请随意赞赏

Code JavaScript

Axios 基础教程

https://blog.antx.cc/archives/dfdadc7e-645e-48ab-945b-8569a9045b17

作者

Antx

发布于

2025-11-15

更新于

2025-11-15

许可协议

CC BY 4.0