前端笔记-Axios

news2025/4/25 20:29:50

Axios学习目标

Axios与API交互1、Axios配置与使用
2、请求/响应拦截器
3、API设计模式（了解RESTful风格即可）

学习参考：起步 | Axios中文文档 | Axios中文网 

什么是Axios 

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专门用于浏览器和 Node.js 环境。

其核心特性有如下：

  1. ​跨平台支持​：

    • 在浏览器中通过 XMLHttpRequest 发送请求
    • 在 Node.js 中通过 http 模块发送请求

  2. ​Promise API​：

    • 所有请求都返回 Promise 对象
    • 支持 async/await 语法

  3. ​自动转换​：

    • 自动转换请求和响应数据（如 JSON 转换）
    • 可自定义转换逻辑

  4. ​拦截器系统​：

    • 请求和响应拦截
    • 可用于添加认证头、处理错误等

  5. ​取消请求​：

    • 支持取消正在进行的请求
    • 使用 CancelToken 或 AbortController

经常使用于：

  1. 前端应用与 RESTful API 交互
  2. 需要统一处理 HTTP 请求的大型应用
  3. 需要请求拦截（如添加认证头）的应用
  4. 需要取消请求功能的复杂交互应用
  5. 同构应用（既在浏览器又在服务器运行）

配置与使用

安装

使用 npm:

npm install axios

使用cdn：

https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>

示例：

服务器端：

const express = require('express');
//创建应用对象
const app = express();

// 添加请求体解析
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

//创建路由规则

// Axios请求
app.all('/axios-server', (req, res) => {
    // 设置响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    const data ={name:'axios发送的请求'};
    res.send(JSON.stringify(data));
    //res.send('Its Axios Qusetion!');
}); 

// 404处理
app.use((req, res) => {
    res.status(404).send('Not Found');
});

//监听端口启动服务
app.listen(8000, () => {
    console.log('Server is running on port 8000');
});

 html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送AJAX请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">Axios 发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型</button>
    </div>
    

    <script>
    const btns = document.querySelectorAll("button");
    
    // GET请求示例
    btns[0].onclick = function() {
        axios.get('http://127.0.0.1:8000/axios-server', {
            params: { 
                a: 100,
                b: 200
            },
            //请求头信息
            headers:{
                name:'value',
                age:20
            }
        })
        .then(function(response) {
            console.log(response.data);
        })
        .catch(function(error) {
            console.error('请求失败:', error);
        });
    };

    // POST请求示例
    btns[1].onclick = function() {
        axios.post('http://127.0.0.1:8000/axios-server', {
            username: 'admin',
            password: '123456'
        })
        .then(function(response) {
            console.log(response.data);
        });
    };

    // 通用AJAX请求示例
    btns[2].onclick = function() {
        axios({
            method: 'POST',
            url: 'http://127.0.0.1:8000/axios-server',
            data: {
                key1: 'value1',
                key2: 'value2'
            }
        })
        .then(function(response) {
            console.log(response.data);
        });
    };
    </script>
</body>
</html>

可以直接浏览器打开代码查看一下F12控制台的信息，这里不做重点讲解，只了解使用。

请求/响应拦截器

请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    /​**​
     * 在发送请求前做些什么
     * config对象包含请求的所有配置信息
     * 可以在这里统一处理以下内容：
     * 1. 添加认证token
     * 2. 添加公共参数
     * 3. 显示loading状态
     * 4. 记录请求日志
     */
    
    // 添加认证token
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    
    // 添加时间戳防止缓存
    if (config.method === 'get') {
      config.params = config.params || {};
      config.params._t = Date.now();
    }
    
    // 必须返回修改后的config
    return config;
  },
  function (error) {
    /​**​
     * 对请求错误做些什么
     * 通常是在请求配置出错时触发
     * 比如config格式不正确等
     */
    console.error('请求配置错误:', error);
    
    // 返回一个被拒绝的Promise，会进入catch流程
    return Promise.reject(error);
  }
);

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    /​**​
     * 对响应数据做点什么
     * 2xx范围内的状态码都会触发这个函数
     * 可以在这里：
     * 1. 统一处理响应数据格式
     * 2. 隐藏loading状态
     * 3. 处理业务特定的状态码
     */
    
    // 直接返回response.data，简化后续处理
    return response.data;
    
    // 或者根据业务状态码进一步处理
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      // 业务逻辑错误
      return Promise.reject(response.data.message);
    }
  },
  function (error) {
    /​**​
     * 对响应错误做点什么
     * 超出2xx范围的状态码都会触发这个函数
     * 可以在这里：
     * 1. 统一处理错误
     * 2. 根据状态码跳转页面
     * 3. 显示错误提示
     */
    
    // 错误对象结构说明
    if (error.response) {
      // 请求已发出，服务器返回了错误状态码
      const { status, data } = error.response;
      
      switch (status) {
        case 401:
          // 未授权，跳转到登录页
          window.location.href = '/login';
          break;
        case 403:
          // 禁止访问，显示权限不足提示
          showToast('权限不足，请联系管理员');
          break;
        case 404:
          // 资源不存在
          showToast('请求的资源不存在');
          break;
        case 500:
          // 服务器错误
          showToast('服务器内部错误，请稍后再试');
          break;
        default:
          // 其他错误
          showToast(`请求错误: ${status}`);
      }
      
      // 可以在这里记录错误日志
      logError(error);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('无响应:', error.request);
      showToast('网络连接异常，请检查网络');
    } else {
      // 设置请求时发生了错误
      console.error('请求配置错误:', error.message);
      showToast('请求配置错误');
    }
    
    // 继续抛出错误，让调用者可以处理
    return Promise.reject(error);
  }
);

API设计模式与RESTful最佳实践

RESTful API设计原则详解

​1. 资源导向设计：​​

  • 使用名词而非动词表示资源（如/users而不是/getUsers）
  • 资源使用复数形式（如/articles而不是/article）
  • 层级关系表达：/users/123/posts表示用户123的所有帖子

​2. HTTP方法语义：​​

方法语义幂等性安全性请求体典型状态码适用场景
GET获取资源✔️ 是✔️ 是❌ 无200 OK
404 Not Found		查询数据、获取资源详情
POST创建资源❌ 否❌ 否✔️ 有201 Created
400 Bad Request		创建新资源、提交表单
PUT替换/完整更新资源✔️ 是❌ 否✔️ 有200 OK
204 No Content		全量更新（需传完整字段）
PATCH部分更新资源❌ 否❌ 否✔️ 有200 OK
422 Unprocessable Entity		增量更新（只需传修改字段）
DELETE删除资源✔️ 是❌ 否❌ 无204 No Content
404 Not Found		删除指定资源

​3. 状态码使用指南：​

// 2xx 成功
200 OK - 常规成功响应
201 Created - 资源创建成功
204 No Content - 成功但无返回内容

// 4xx 客户端错误
400 Bad Request - 请求格式错误
401 Unauthorized - 需要认证
403 Forbidden - 无权限访问
404 Not Found - 资源不存在

// 5xx 服务器错误
500 Internal Server Error - 服务器内部错误
503 Service Unavailable - 服务不可用

完整API封装示例

// src/api/auth.js - 认证相关API

import axios from './axiosInstance';

export default {
  /​**​
   * 用户登录
   * @param {Object} credentials - 登录凭据
   * @param {string} credentials.username - 用户名
   * @param {string} credentials.password - 密码
   * @returns {Promise} 包含用户数据的Promise
   */
  login(credentials) {
    return axios.post('/auth/login', credentials)
      .then(response => {
        // 登录成功处理
        const { token, user } = response.data;
        
        // 存储token到本地存储
        localStorage.setItem('authToken', token);
        
        // 返回用户数据
        return user;
      });
  },
  
  /​**​
   * 用户注销
   * @returns {Promise} 空Promise
   */
  logout() {
    // 清除本地token
    localStorage.removeItem('authToken');
    
    // 调用服务器注销接口
    return axios.post('/auth/logout');
  },
  
  /​**​
   * 获取当前用户信息
   * @returns {Promise} 包含用户信息的Promise
   */
  getCurrentUser() {
    return axios.get('/auth/me')
      .then(response => response.data);
  }
};

// src/api/users.js - 用户管理API

import axios from './axiosInstance';

export default {
  /​**​
   * 获取用户列表
   * @param {Object} [params] - 查询参数
   * @param {number} [params.page=1] - 页码
   * @param {number} [params.limit=10] - 每页数量
   * @returns {Promise} 包含用户列表和分页信息的Promise
   */
  getUsers(params = { page: 1, limit: 10 }) {
    return axios.get('/users', { params })
      .then(response => ({
        users: response.data.items,
        pagination: response.data.pagination
      }));
  },
  
  /​**​
   * 创建新用户
   * @param {Object} userData - 用户数据
   * @returns {Promise} 包含新用户信息的Promise
   */
  createUser(userData) {
    return axios.post('/users', userData)
      .then(response => response.data);
  },
  
  /​**​
   * 更新用户信息
   * @param {number} id - 用户ID
   * @param {Object} updates - 更新字段
   * @param {boolean} [partial=false] - 是否部分更新
   * @returns {Promise} 包含更新后用户信息的Promise
   */
  updateUser(id, updates, partial = false) {
    const method = partial ? 'patch' : 'put';
    return axios[method](`/users/${id}`, updates)
      .then(response => response.data);
  },
  
  /​**​
   * 删除用户
   * @param {number} id - 用户ID
   * @returns {Promise} 空Promise
   */
  deleteUser(id) {
    return axios.delete(`/users/${id}`);
  }
};

在Vue组件中使用API的示例

// src/components/UserList.vue

import userAPI from '@/api/users';
import authAPI from '@/api/auth';

export default {
  data() {
    return {
      users: [],
      currentUser: null,
      loading: false,
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    };
  },
  
  async created() {
    // 组件创建时获取当前用户和用户列表
    await this.fetchCurrentUser();
    await this.fetchUsers();
  },
  
  methods: {
    // 获取当前登录用户
    async fetchCurrentUser() {
      try {
        this.currentUser = await authAPI.getCurrentUser();
      } catch (error) {
        console.error('获取用户信息失败:', error);
        this.$router.push('/login');
      }
    },
    
    // 获取用户列表
    async fetchUsers() {
      this.loading = true;
      try {
        const { users, pagination } = await userAPI.getUsers({
          page: this.pagination.page,
          limit: this.pagination.limit
        });
        
        this.users = users;
        this.pagination = {
          ...this.pagination,
          total: pagination.total
        };
      } catch (error) {
        console.error('获取用户列表失败:', error);
        this.$message.error('加载用户列表失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 删除用户
    async handleDelete(userId) {
      try {
        await this.$confirm('确定要删除这个用户吗？', '提示', {
          type: 'warning'
        });
        
        await userAPI.deleteUser(userId);
        
        // 删除成功后刷新列表
        this.fetchUsers();
        this.$message.success('删除用户成功');
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除用户失败:', error);
          this.$message.error('删除用户失败');
        }
      }
    },
    
    // 切换页码
    handlePageChange(page) {
      this.pagination.page = page;
      this.fetchUsers();
    }
  }
};

总结：Axios最佳实践

  1. ​配置管理​：

    • 使用axios.create()创建不同用途的实例
    • 将基础URL、超时时间等配置集中管理

  2. ​拦截器使用​：

    • 请求拦截器处理认证、公共参数
    • 响应拦截器统一处理错误和返回数据

  3. ​API封装​：

    • 按功能模块组织API
    • 为每个方法添加清晰的JSDoc注释
    • 统一返回Promise便于调用

  4. ​错误处理​：

    • 区分网络错误、服务器错误和业务错误
    • 在拦截器和具体调用处分层处理

  5. ​RESTful设计​：

    • 遵循资源导向原则
    • 正确使用HTTP方法和状态码
    • 保持接口风格一致

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2342680.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C# 类型、存储和变量(值类型引用类型)

C# 类型、存储和变量(值类型引用类型)

本章内容 C#程序是一组类型声明 类型是一种模板 实例化类型 数据成员和函数成员 预定义类型 用户定义类型 栈和堆 值类型和引用类型 变量 静态类型和dynamic关键字 可空类型 值类型引用类型 数据项的类型定义了存储数据需要的内存大小及组成该类型的数据成员。类型还决定了对象…
阅读更多...
智慧校园从配电开始：AISD300为校园安全加上智能防护罩

智慧校园从配电开始：AISD300为校园安全加上智能防护罩

安科瑞刘鸿鹏 摘要 随着校园用电需求不断上升及其安全保障要求的提高&#xff0c;传统低压配电系统已逐渐难以满足现代校园的安全与智能化管理需求。本文基于安科瑞电气推出的AISD300系列三相智能安全配电装置&#xff0c;探讨其在校园电力系统中的应用优势及关键技术特性。…
阅读更多...
一 、环境的安装 Anaconda + Pycharm + PaddlePaddle

一 、环境的安装 Anaconda + Pycharm + PaddlePaddle

《从零到一实践&#xff1a;系统性学习生成式 AI(NLP)》 一 、环境的安装 Anaconda Pycharm PaddlePaddle 1. Anaconda 软件安装 Anaconda 软件安装有大量的教程&#xff0c;此处不在说明&#xff0c;安装完成之后界面如下&#xff1a; 2. 创建 Anaconda 虚拟环境 Paddl…
阅读更多...
十倍开发效率 - IDEA插件之 Maven Helper

十倍开发效率 - IDEA插件之 Maven Helper

0X00 先看效果 第一个选项表示存在冲突的依赖&#xff0c;可以看到图片中 mysql 的连接依赖发生了冲突&#xff0c;在低版本的上面直接右键选择 Exclude&#xff0c;冲突的依赖就被解决掉了。 0X01 安装 在 Plugins 中直接搜索 Maven Helper&#xff0c;选择第一个进行安装&am…
阅读更多...
人机共跑，马拉松人型机器人同跑

人机共跑，马拉松人型机器人同跑

马拉松比赛对人形机器人来说&#xff0c;是一场对硬件极限的测试&#xff0c;涉及机械、传感器、能源管理等多个方面。用户问的是硬件方面的考察和改进&#xff0c;这意味着我的回答需要聚焦于硬件性能&#xff0c;而不是算法或软件的优化。 对人形机器人硬件的考研 机械结构与…
阅读更多...
策略模式：动态切换算法的设计智慧

策略模式：动态切换算法的设计智慧

策略模式&#xff1a;动态切换算法的设计智慧 一、模式核心&#xff1a;定义一系列算法并可相互替换 在软件开发中&#xff0c;常常会遇到需要根据不同情况选择不同算法的场景。例如&#xff0c;在电商系统中&#xff0c;根据不同的促销活动&#xff08;如满减、折扣、赠品&a…
阅读更多...
uniapp微信小程序：WIFI设备配网之TCP/UDP开发AP配网

uniapp微信小程序：WIFI设备配网之TCP/UDP开发AP配网

一、AP配网技术原理 1.1 配网模式选择 AP配网&#xff08;SoftAP模式&#xff09;是IoT设备配网成功率最高的方案之一 1、其核心原理&#xff1a; ​​设备端​​&#xff1a;启动AP模式&#xff08;如SSID格式YC3000_XXXX&#xff0c;默认IP192.168.4.1&#xff09;​​手…
阅读更多...
离线-DataX

离线-DataX

基本介绍 DataX 是阿里云 DataWorks数据集成的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台&#xff0c;它是一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源…
阅读更多...
第5课：对象与类——JS的“信息收纳盒”

第5课：对象与类——JS的“信息收纳盒”

生活从不会亏待每一个努力向上的人&#xff0c;愿你带着满腔热忱&#xff0c;无畏前行&#xff0c;用汗水书写青春的华章&#xff0c;用拼搏铸就人生的辉煌&#xff0c;今日的每一份付出&#xff0c;都将是未来成功的基石&#xff01; 欢迎来到「JavaScript 魔法学院」第 5 课…
阅读更多...
xshell 登录验证失败解决

xshell 登录验证失败解决

产生原因&#xff1a;检查防火墙、selinux 、网络模式、对外是否能ping外网 systemctl status firewalld cat /etc/selinux/config #disabled ping 223.5.5.5 ping 8.8.8.8 ping www.baidu.com 一、检查网络连接 确认虚拟机是否在线&#xff1a; 首先&#xff0c;确保虚…
阅读更多...
AI 赋能 3D 创作！Tripo3D 全功能深度解析与实操教程

AI 赋能 3D 创作！Tripo3D 全功能深度解析与实操教程

大家好&#xff0c;欢迎来到本期科技工具分享&#xff01; 今天要给大家带来一款革命性的 AI 3D 模型生成平台 ——Tripo3D。 无论你是游戏开发者、设计师&#xff0c;还是 3D 建模爱好者&#xff0c;只要想降低创作门槛、提升效率&#xff0c;这款工具都值得深入了解。 接下…
阅读更多...
AI书籍大模型微调-基于亮数据获取垂直数据集

AI书籍大模型微调-基于亮数据获取垂直数据集

大模型的开源&#xff0c;使得每位小伙伴都能获得AI的加持&#xff0c;包括你可以通过AIGC完成工作总结&#xff0c;图片生成等。这种加持是通用性的&#xff0c;并不会对个人的工作带来定制的影响&#xff0c;因此各个行业都出现了垂直领域大模型。 垂直大模型是如何训练出来…
阅读更多...
Kafka命令行的使用/Spark-Streaming核心编程（二）

Kafka命令行的使用/Spark-Streaming核心编程（二）

Kafka命令行的使用 创建topic kafka-topics.sh --create --zookeeper node01:2181,node02:2181,node03:2181 --topic test1 --partitions 3 --replication-factor 3 分区数量&#xff0c;副本数量&#xff0c;都是必须的。 数据的形式&#xff1a; 主题名称-分区编号。 在…
阅读更多...
2020-06-23 暑期学习日更计划（机器学习入门之路（资源汇总）+概率论）

2020-06-23 暑期学习日更计划（机器学习入门之路（资源汇总）+概率论）

机器学习入门 前言 说实话&#xff0c;机器学习想学好真心不易&#xff0c;很多时候都感觉自己学得云里雾里。以前一段时间自己为了完成毕业设计&#xff0c;在机器学习的理论部分并没有深究&#xff0c;仅仅通过TensorFlow框架力求快速实现模型。现在来看&#xff0c;很多时候…
阅读更多...
SQL 时间转换的CONVERT()函数应用说明

SQL 时间转换的CONVERT()函数应用说明

目录 1.常用查询使用的几个 2.其他总结 1.常用查询使用的几个 SELECT CONVERT(VARCHAR, GETDATE(), 112) SELECT CONVERT(VARCHAR, GETDATE(), 113)SELECT CONVERT(VARCHAR, GETDATE()-1, 112) SELECT CONVERT(VARCHAR, GETDATE()-1, 113) 2.其他总结 SELECT CONVERT(VARCHA…
阅读更多...
SystemWeaver详解：从入门到精通的深度实战指南

SystemWeaver详解：从入门到精通的深度实战指南

SystemWeaver详解&#xff1a;从入门到精通的深度实战指南 文章目录 SystemWeaver详解&#xff1a;从入门到精通的深度实战指南一、SystemWeaver环境搭建与基础配置1.1 多平台安装全流程 二、新手必学的十大核心操作2.1 项目创建全流程2.2 建模工具箱深度解析 三、需求工程与系…
阅读更多...
windows中kafka4.0集群搭建

windows中kafka4.0集群搭建

参考文献 Apache Kafka windows启动kafka4.0&#xff08;不再需要zookeeper&#xff09;_kafka压缩包-CSDN博客 Kafka 4.0 KRaft集群部署_kafka4.0集群部署-CSDN博客 正文 注意jdk需要17版本以上的 修改D:\software\kafka_2.13-4.0.0\node1\config\server.properties配置文…
阅读更多...
【JavaWeb后端开发04】java操作数据库(JDBC + Mybatis+ yml格式)详解

【JavaWeb后端开发04】java操作数据库(JDBC + Mybatis+ yml格式)详解

文章目录 1. 前言2. JDBC2.1 介绍2.2 入门程序2.2.1 DataGrip2.2.2 在IDEA执行sql语句 2.3 查询数据案例2.3.1 需求2.3.2 准备工作2.3.3 AI代码实现2.3.4 代码剖析2.3.4.1 ResultSet2.3.4.2 预编译SQL2.3.4.2.1 SQL注入2.3.4.2.2 SQL注入解决2.3.4.2.3 性能更高 2.4 增删改数据…
阅读更多...
postman 删除注销账号

postman 删除注销账号

一、删除账号 1.右上角找到 头像&#xff0c;view profile https://123456-6586950.postman.co/settings/me/account 二、找回账号 1.查看日志所在位置 三、postman更新后只剩下history 在 Postman 中&#xff0c;如果你发现更新后只剩下 History&#xff08;历史记录&…
阅读更多...
Java发展史及版本详细说明

Java发展史及版本详细说明

Java发展史及版本详细说明 1. Java 1.0&#xff08;1996年1月23日&#xff09; 核心功能&#xff1a; 首个正式版本&#xff0c;支持面向对象编程、垃圾回收、网络编程。包含基础类库&#xff08;java.lang、java.io、java.awt&#xff09;。支持Applet&#xff08;浏览器嵌入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023