Axios 知识点全面总结

文章目录

  • Axios 知识点全面总结
    • 一、Axios 基础概念
      • 1. 什么是 Axios？
      • 2. 核心特性
    • 二、安装与基本用法
      • 1. 安装
      • 2. 基本请求示例
    • 三、请求方法与参数
    • 四、请求配置选项（config）
    • 五、拦截器（Interceptors）
    • 六、错误处理
    • 七、取消请求
    • 八、并发请求
    • 九、创建实例（Instance）
    • 十、与框架集成
    • 十一、最佳实践与常见问题
    • 十二、TypeScript 支持
    • 十三、Axios 调用后端全局 API
      • 1、全局方法 httpClient.js
      • 2、四种 HTTP 方法 封装 api.js
      • 3、使用封装方法 userService.js

Axios 知识点全面总结

一、Axios 基础概念

1. 什么是 Axios？

Axios 是一个 基于 Promise 的 HTTP 客户端库，用于浏览器和 Node.js 环境中发送 HTTP 请求。它支持 请求 / 响应拦截、请求取消、Promise 链式调用 等特性，是前端开发中最常用的 HTTP 库之一。

2. 核心特性

  • 支持浏览器和 Node.js 环境
  • 基于 Promise 实现，支持 async/await
  • 提供请求 / 响应拦截器，方便处理请求和响应数据
  • 支持请求取消（通过 CancelToken 或 AbortController）
  • 自动转换请求和响应数据（JSON 数据处理）
  • 支持请求超时设置、自定义请求头、并发请求等

二、安装与基本用法

1. 安装

# 通过 npm 安装
npm install axios# 通过 yarn 安装
yarn add axios# 浏览器直接引入（CDN）
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 基本请求示例

// 发送 GET 请求
axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {console.error('请求错误:', error);});// 发送 POST 请求
axios.post('/api/user', {name: '张三',age: 25
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error('请求错误:', error);
});// 使用 async/await
async function fetchData() {try {const response = await axios.get('/api/data');return response.data;} catch (error) {throw new Error('获取数据失败: ' + error.message);}
}

三、请求方法与参数

方法描述参数格式
axios.get(url[, config])发送 GET 请求（获取资源）url, config（可选配置）
axios.post(url[, data, config])发送 POST 请求（提交资源）url, data（请求体）, config
axios.put(url[, data, config])发送 PUT 请求（更新资源）url, data, config
axios.delete(url[, config])发送 DELETE 请求（删除资源）url, config
axios.head(url[, config])发送 HEAD 请求（获取资源头部信息）url, config
axios.patch(url[, data, config])发送 PATCH 请求（部分更新资源）url, data, config

示例：带参数的 GET 请求

// 方式一：通过 params 参数传递查询参数
axios.get('/api/users', {params: {id: 1,name: '张三'}
})// 方式二：直接拼接 URL（不推荐，手动处理编码）
axios.get('/api/users?id=1&name=张三')

四、请求配置选项（config）

Axios 的请求配置可用于自定义请求行为，常用配置如下：

  • 基础配置
{url: '/api/data',             // 请求 URLmethod: 'get',                // 请求方法（get/post/put等）baseURL: 'https://api.example.com', // 基础 URL，会与 url 拼接timeout: 5000,                // 请求超时时间（毫秒），超过则报错withCredentials: true,        // 是否携带 cookie（跨域请求时）responseType: 'json',         // 响应数据类型（json/blob/text等）headers: { 'X-Custom-Header': 'value' }, // 请求头
}
  • 请求数据相关
{data: { key: value },         // POST/PUT 等请求的请求体数据params: { id: 1 },            // GET 请求的查询参数paramsSerializer: function(params) {// 自定义参数序列化方式return Qs.stringify(params, { arrayFormat: 'brackets' });}
}

五、拦截器（Interceptors）

拦截器用于在请求发送前或响应接收后统一处理数据，分为 请求拦截器 和 响应拦截器。

  1. 请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(config => {// 在请求发送前做些什么（如添加 token、修改请求头）const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 处理请求错误return Promise.reject(error);}
);
  1. 响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做统一处理（如错误码判断、数据格式化）const { data } = response;if (data.code !== 200) {// 错误处理（如提示用户、跳转登录页）throw new Error(data.message || '请求失败');}return data; // 直接返回处理后的数据，简化后续 then 操作},error => {// 处理响应错误（如网络错误、404、500 等）const { response } = error;if (response) {// 响应已接收但状态码非 2xxswitch (response.status) {case 401:console.log('未授权，请重新登录');break;case 404:console.log('资源不存在');break;default:console.log('服务器错误');}} else {// 网络错误（如超时、断网）console.log('网络连接失败');}return Promise.reject(error);}
);
  1. 移除拦截器
const myInterceptor = axios.interceptors.request.use(...);
axios.interceptors.request.eject(myInterceptor); // 移除请求拦截器

六、错误处理

Axios 的错误处理通过 catch 或 try/catch 实现，常见错误类型：

axios.get('/api/data').then(response => {// 处理成功响应}).catch(error => {if (axios.isAxiosError(error)) {// 处理 Axios 错误（如请求错误、响应错误）console.log('Axios 错误:', error.message);console.log('错误状态码:', error.response?.status);console.log('错误响应数据:', error.response?.data);} else {// 处理其他错误（如网络错误）console.log('其他错误:', error);}});

七、取消请求

在组件卸载或请求不再需要时，可取消请求以避免资源浪费。

  1. 使用 CancelToken（旧方式）
import axios from 'axios';const source = axios.CancelToken.source();axios.get('/api/data', {cancelToken: source.token
}).then(response => {// 处理响应
}).catch(error => {if (axios.isCancel(error)) {console.log('请求已取消:', error.message);}
});// 取消请求
source.cancel('用户取消了请求');
  1. 使用 AbortController（推荐，浏览器原生支持）
const controller = new AbortController();
const signal = controller.signal;axios.get('/api/data', { signal }).then(response => {// 处理响应}).catch(error => {if (error.name === 'AbortError') {console.log('请求已取消');}});// 取消请求
controller.abort();

八、并发请求

Axios 提供 axios.all 方法处理多个并发请求，并通过 axios.spread 分配结果。

const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');axios.all([request1, request2]).then(axios.spread((response1, response2) => {// 两个请求都成功时执行console.log('数据1:', response1.data);console.log('数据2:', response2.data);})).catch(errors => {// 任一请求失败时执行console.log('并发请求错误:', errors);});

九、创建实例（Instance）

当需要不同配置的请求时，可创建多个 Axios 实例。

// 创建自定义实例
const instance = axios.create({baseURL: 'https://api.example.com',timeout: 10000,headers: {'Content-Type': 'application/json'}
});// 使用实例发送请求
instance.get('/users').then(response => {console.log(response.data);});// 为实例添加拦截器
instance.interceptors.request.use(...);

十、与框架集成

  1. 在 Vue 中使用
// main.js 中配置
import axios from 'axios';
Vue.prototype.$axios = axios; // 将 axios 挂载到 Vue 实例上// 组件中使用
this.$axios.get('/api/data').then(response => {this.data = response.data;});
  1. 在 React 中使用
import axios from 'axios';function fetchData() {return axios.get('/api/data').then(response => response.data);
}function MyComponent() {const [data, setData] = useState(null);useEffect(() => {fetchData().then(setData);// 组件卸载时取消请求（使用 AbortController）const controller = new AbortController();return () => controller.abort();}, []);// ...
}

十一、最佳实践与常见问题

  1. 设置默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

  1. 处理跨域请求
    前端设置 withCredentials: true
    后端配置 CORS 响应头（如 Access-Control-Allow-Origin）

  2. 请求超时重试

// 封装超时重试函数
function retryRequest(config, retries = 3) {return new Promise((resolve, reject) => {const attempt = () => {axios(config).then(resolve).catch(error => {if (error.code === 'ECONNABORTED' && retries > 0) {// 超时错误且还有重试次数setTimeout(() => {retryRequest(config, retries - 1).then(resolve, reject);}, 1000);} else {reject(error);}});};attempt();});
}
  1. 与 Fetch API 对比
    Axios 优势：浏览器 / Node 通用、拦截器、自动转换 JSON、错误处理更友好
    Fetch 优势：浏览器原生支持、更简洁的 API、支持 AbortController（需 polyfill 兼容旧浏览器）

十二、TypeScript 支持

Axios 原生支持 TypeScript，可通过泛型指定响应数据类型：

interface User {id: number;name: string;
}// 指定响应数据类型为 User 数组
axios.get<User[]>('/api/users').then(response => {// response.data 会被推断为 User[] 类型const firstUser = response.data[0].name;});

十三、Axios 调用后端全局 API

1、全局方法 httpClient.js

import axios from 'axios';// 创建 axios 实例
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API, // 从环境变量获取API基础URLtimeout: 5000, // 请求超时时间headers: {'Content-Type': 'application/json;charset=utf-8'}
});// 请求拦截器
service.interceptors.request.use(config => {// 在发送请求之前做些什么// 例如添加 tokenconst token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么console.log(error); // for debugreturn Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做点什么const res = response.data;// 假设业务状态码 200 表示成功if (res.code !== 200) {console.log(res.message || 'Error');return Promise.reject(new Error(res.message || 'Error'));} else {return res;}},error => {// 对响应错误做点什么console.log('err' + error); // for debugreturn Promise.reject(error);}
);export default service;

2、四种 HTTP 方法 封装 api.js

import service from './httpClient';/*** get 请求* @param {string} url 请求路径* @param {object} params 请求参数* @returns {Promise}*/
export function get(url, params) {return service({url,method: 'get',params});
}/*** post 请求* @param {string} url 请求路径* @param {object} data 请求数据* @returns {Promise}*/
export function post(url, data) {return service({url,method: 'post',data});
}/*** put 请求* @param {string} url 请求路径* @param {object} data 请求数据* @returns {Promise}*/
export function put(url, data) {return service({url,method: 'put',data});
}/*** delete 请求* @param {string} url 请求路径* @param {object} params 请求参数* @returns {Promise}*/
export function del(url, params) {return service({url,method: 'delete',params});
}

3、使用封装方法 userService.js

import { get, post, put, del } from './api';// 获取用户列表
export function getUserList(params) {return get('/api/users', params);
}// 创建用户
export function createUser(data) {return post('/api/users', data);
}// 更新用户信息
export function updateUser(id, data) {return put(`/api/users/${id}`, data);
}// 删除用户
export function deleteUser(id) {return del(`/api/users/${id}`);
}

这个封装包含三个主要部分：

  1. 基础配置和拦截器设置（httpClient.js）
  2. 四种 HTTP 方法的封装（api.js）
  3. 示例服务模块（userService.js）展示如何使用封装的方法

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

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

相关文章

【软考高级系统架构论文】论 SOA 在企业集成架构设计中的应用

【软考高级系统架构论文】论 SOA 在企业集成架构设计中的应用

论文真题 企业应用集成(Enterprise Application Integration, EAI)是每个企业都必须要面对的实际问题。面向服务的企业应用集成是一种基于面向服务体系结构(Service - Oriented Architecture, SOA)的新型企业应用集成技术，强调将企业和组织内部的资源和业务功能暴露为服务，实…
阅读更多...
springboot 提供的可扩展接口

springboot 提供的可扩展接口

一、spring 和 springboot Spring框架提供了全面的基础架构支持。包含依赖注入和开箱即用等模块&#xff0c;如&#xff1a;Spring JDBC 、Spring MVC 、Spring Security、 Spring AOP 、Spring ORM 、Spring Test Spring Boot 约定大于配置-----消除了设置Spring应用程序所需…
阅读更多...
python学习打卡day55

python学习打卡day55

DAY 55 序列预测任务介绍 知识点回顾 序列预测介绍 单步预测多步预测的2种方式 序列数据的处理&#xff1a;滑动窗口多输入多输出任务的思路经典机器学习在序列任务上的劣势&#xff1b;以随机森林为例 作业&#xff1a;手动构造类似的数据集&#xff08;如cosx数据&#xff09…
阅读更多...
Leetcode hot100 Java刷题

Leetcode hot100 Java刷题

文章目录 快排146. LRU 缓存acm模式树的前中后序遍历acm模式链表的基本操作1. 两数之和49. 字母异位词分组128. 最长连续序列283. 移动零11. 盛最多水的容器15. 三数之和42. 接雨水53. 最大子数组和56. 合并区间73. 矩阵置零48. 旋转图像141. 环形链表142. 环形链表 II24. 两两…
阅读更多...
Linux 命令详解 —— 进程管理

Linux 命令详解 —— 进程管理

文章目录 精通Linux操作系统(以Centos7为例)进程管理ps常用组合进程状态 STAT 详解高级筛选与格式化输出按条件过滤进程自定义输出字段显示进程树关系排障场景定位高 CPU检查僵尸进程查看进程的线程查看进程打开的文件/网络连接常用组合速查top前5摘要区进程列表信息交互式命令…
阅读更多...
【软考高级系统架构论文】论湖仓一体架构及其应用

【软考高级系统架构论文】论湖仓一体架构及其应用

论文真题&#xff1a; 随着5G、大数据、人工智能、物联网等技术的不断成熟&#xff0c;各行各业的业务场景日益复杂&#xff0c;企业数据呈现出大规模、多样性的特点&#xff0c;特别是非结构化数据呈现出爆发式增长趋势。在这一背景下&#xff0c;企业数据管理不再局限于传统…
阅读更多...
Docker 高级管理笔记

Docker 高级管理笔记

前言&#xff1a;Docker 高级管理概述 随着 Docker 技术的广泛应用&#xff0c;容器化已成为现代软件开发与部署的核心方式。本笔记聚焦 Docker 高级管理中的两大关键技术 —— 容器通信与数据持久化&#xff0c;深入解析 Docker 网络模式、端口映射、容器互联机制及数据卷管理…
阅读更多...
Spring Boot 项目初始化

Spring Boot 项目初始化

一、什么是 CommandLineRunner CommandLineRunner 是 Spring Boot 提供的一个 函数式接口&#xff0c;声明如下&#xff1a; 该接口只有一个 run(String... args) 方法&#xff0c;会在 Spring Boot 容器启动完成后被自动调用。 你可以将它理解为一种“钩子函数”&#xff0c;…
阅读更多...
C# winform教程(二)----ComboBox

C# winform教程(二)----ComboBox

一、作用 一个可以输入也可以下拉的列表框。 二、属性 一般我们都是使用下拉列表&#xff0c;不使用在线编辑&#xff08;本人没用过&#xff09; 属性 名称内容含义items组合框中项可以定义下拉列表的值DropDownStyle外观和功能是否可以填写&#xff0c;一般选择dropdownli…
阅读更多...
FFmpeg裁剪视频在Android上的实现

FFmpeg裁剪视频在Android上的实现

添加依赖&#xff1a; implementation com.arthenica:mobile-ffmpeg-full:4.4.LTS 代码实现&#xff1a; fun cropMiddleThird(inputPath: String, outputPath: String) {val cmd arrayOf("-y", // 覆盖输出文件"-i", inputPath,"-filter:v&quo…
阅读更多...
openEuler 22.03 sp1 更新openssh 10.0p2 —— 筑梦之路

openEuler 22.03 sp1 更新openssh 10.0p2 —— 筑梦之路

华为欧拉openEuler制作openssh 9.1/9.2/9.3 p1 rpm——筑梦之路_欧拉构建openssh-CSDN博客 上面是需要修改的sshd_config配置&#xff0c;将这3行注释掉。 附上22.03 sp1的yum源文件 # cat openEuler.repo #generic-repos is licensed under the Mulan PSL v2. #You can use t…
阅读更多...
AGI（4）大模型的推理综述

AGI（4）大模型的推理综述

本文源自基于基础模型的推理综述《A Survey of Reasoning with Foundation Models》&#xff0c;因为原文有点难于理解&#xff0c;在这个论文的基础上增加了自己的解释和理解&#xff0c;重新整理成此文。大家可以通过查看原文阅读原始论文。 1、推理的概念 推理是解决复杂问题…
阅读更多...
Rust 中的宏与函数

Rust 中的宏与函数

在 Rust 编程中&#xff0c;宏&#xff08;Macro&#xff09;和函数&#xff08;Function&#xff09;是两种非常重要的编程工具。虽然它们都可以用来组织代码和实现复用&#xff0c;但它们在定义方式、作用原理、性能、灵活性以及适用场景等方面存在诸多不同。本文将详细介绍 …
阅读更多...
c++中左值与右值

c++中左值与右值

在 C++ 中，左值（lvalue） 和 右值（rvalue） 是表达式的基本属性，它们决定了表达式能否被赋值、取地址等操作。 1. 核心定义 左值（lvalue） 特点：表示一个具名的、持久的对象，可位于赋值语句左侧。示例： int x = 42; // x是左值 x = 100; // 合法：左值可…
阅读更多...
DeepSeek14-open-webui 常用概念区分

DeepSeek14-open-webui 常用概念区分

I、“Tools & Functions” 与 Pipelines&#xff08;工作流系统&#xff09;区别 以下是“Tool & Functions”与“Pipelines”的区别、适用场景及作用的详细分析&#xff0c;内容基于参考文档提取与总结&#xff1a; 一、本质区别 维度Tool & FunctionsPipeline…
阅读更多...
PaddleOCR + Flask 构建 Web OCR 服务实战

PaddleOCR + Flask 构建 Web OCR 服务实战

1、前言 随着图像识别技术的发展，OCR（光学字符识别）已经成为很多应用场景中的基础能力。PaddleOCR 是百度开源的一个高性能 OCR 工具库，支持中英文、多语言、轻量级部署等特性。 而 Flask 是一个轻量级的 Python Web 框架，非常适合快速构建 RESTful API 或小型 Web 应用…
阅读更多...
C++结构体初始化与成员函数实现语法详解

C++结构体初始化与成员函数实现语法详解

C结构体初始化与成员函数实现语法详解 一、结构体静态成员初始化语法 在C中&#xff0c;静态成员变量需要在类外部进行定义和初始化。提供的代码展示了如何为MAIN_PROPULSION_CAN类的静态成员变量进行初始化&#xff1a; MAIN_PROPULSION_CAN::VoltageThresholds MAIN_PROPU…
阅读更多...
买了新内存条插上bios识别，进入系统不可用，b450主板，内存插槽A1A2 可以点亮，B1B2不可以，A2B2不可以，B1B2还是不可以

买了新内存条插上bios识别，进入系统不可用，b450主板，内存插槽A1A2 可以点亮，B1B2不可以，A2B2不可以，B1B2还是不可以

提示&#xff1a;买了新内存条插上bios识别&#xff0c;进入系统不可用&#xff0c;b450主板&#xff0c;内存插槽A1A2 可以点亮&#xff0c;B1B2不可以&#xff0c;A2B2不可以 文章目录 前言——环境一、第一种情况&#xff0c;开机不能点亮二、第二种情况, 总内存&#xff0c…
阅读更多...
7.4.1_2B树的插入删除

7.4.1_2B树的插入删除

B树插入&#xff1a; 假如是m阶B树&#xff0c;插入关键字时都要满足每个节点上的关键字个数最少为m/2向上取整-1关键字&#xff0c;最多有m-1个关键字&#xff0c;且每次插入的新元素一定是放在最底层的终端节点(因为如果不是放在终端节点&#xff0c;会导致该节点上可能有叶子…
阅读更多...
Linux系统基本操作指令

Linux系统基本操作指令

Linux系统基本操作指令 文章目录 Linux系统基本操作指令一、介绍二、基础设置2.1 设置ubuntu与window的共享目录2.2 ubuntu系统简单介绍 三、Linux命令及工具介绍3.1 目录管理命令(功能&#xff0c;格式&#xff0c;参数&#xff0c;系统参数)3.2 文件操作命令 四、网络命令4.1…
阅读更多...
最新文章

Copyright @ 2022~2023