Axios介绍(前端开发处理网络请求首选工具,基于Promise HTTP客户端,可以在浏览器和Node.js环境使用)(Axios库)

文章目录

    • 1. Axios简介
      • 1.1 核心特性
        • - **Promise based** - 支持Promise API,便于处理异步操作
        • - **跨平台** - 同时支持浏览器和Node.js环境
        • - **拦截请求和响应** - 通过拦截器机制轻松实现请求/响应转换
          • 1. **自动转换JSON数据** - 自动将请求数据转换为JSON格式
          • 2. **取消请求** - 支持取消已发出但尚未完成的请求
          • 3. **防御XSRF** - 自带防御跨站请求伪造攻击机制
    • 2. 基础使用
      • 2.1 安装
      • 2.2 发送GET请求
      • 2.3 发送POST请求
    • 3. 请求配置
    • 4. 响应结构
    • 5. 拦截器
      • 5.1 请求拦截器
      • 5.2 响应拦截器
    • 6. 错误处理
    • 7. 高级使用技巧
      • 7.1 创建实例
      • 7.2 请求取消
      • 7.3 并发请求
    • 8. 最佳实践
      • 8.1 API模块化
      • 8.2 响应数据统一处理
    • 9. 性能优化技巧
      • 9.1 数据缓存
      • 9.2 防抖和节流
    • 10. 与其他HTTP客户端对比
    • 总结

1. Axios简介

Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.js环境中使用。它提供了一套简单且一致的API,使得发送HTTP请求变得异常便捷。自发布以来,Axios已成为前端开发中处理网络请求的首选工具之一。

1.1 核心特性

- Promise based - 支持Promise API,便于处理异步操作
- 跨平台 - 同时支持浏览器和Node.js环境
- 拦截请求和响应 - 通过拦截器机制轻松实现请求/响应转换
1. 自动转换JSON数据 - 自动将请求数据转换为JSON格式
2. 取消请求 - 支持取消已发出但尚未完成的请求
3. 防御XSRF - 自带防御跨站请求伪造攻击机制

2. 基础使用

2.1 安装

# 使用npm
npm install axios# 使用yarn
yarn add axios# 使用CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2.2 发送GET请求

// 基本GET请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error('请求出错', error);});// 带参数的GET请求
axios.get('https://api.example.com/data', {params: {id: 123,category: 'frontend'}
}).then(response => {console.log(response.data);});

2.3 发送POST请求

// 基本POST请求
axios.post('https://api.example.com/users', {username: 'admin',password: '12345'
}).then(response => {console.log(response.data);});// 使用FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('https://api.example.com/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}
});

3. 请求配置

Axios提供了丰富的配置选项,可以精确控制请求行为:

const config = {// 请求URLurl: 'https://api.example.com/data',// 请求方法method: 'post', // 默认是get// 基础URL,将与url拼接baseURL: 'https://api.example.com/',// 自定义请求头headers: {'Authorization': 'Bearer token123','Content-Type': 'application/json'},// URL参数params: {id: 1,page: 2},// 请求体数据data: {username: 'admin'},// 请求超时时间(毫秒)timeout: 5000,// 是否携带凭证信息(cookies)withCredentials: false
};axios(config);

4. 响应结构

Axios响应对象包含以下信息:

axios.get('/api/data').then(response => {console.log(response.data);        // 服务器返回的数据console.log(response.status);      // HTTP状态码console.log(response.statusText);  // HTTP状态信息console.log(response.headers);     // 响应头信息console.log(response.config);      // 请求配置信息});

5. 拦截器

拦截器是Axios的强大特性,可以在请求发送前和响应接收后进行预处理。

5.1 请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(config => {// 在发送请求前做些什么// 例如:添加认证令牌const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);

5.2 响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(response => {// 对响应数据做点什么// 例如:统一数据格式处理if (response.data.code === 0) {return response.data.data;}return response;},error => {// 对响应错误做点什么if (error.response && error.response.status === 401) {// 处理未授权的情况window.location.href = '/login';}return Promise.reject(error);}
);

6. 错误处理

Axios提供了多种错误处理机制:

axios.get('/api/data').then(response => {// 处理成功响应}).catch(error => {if (error.response) {// 服务器返回了状态码,但不在2xx范围内console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);switch (error.response.status) {case 400: console.log('请求参数错误'); break;case 401: console.log('未授权访问'); break;case 404: console.log('请求资源不存在'); break;case 500: console.log('服务器内部错误'); break;default: console.log(`其他错误: ${error.response.status}`);}} else if (error.request) {// 请求已发出,但没有收到响应console.log('网络异常,服务器未响应');} else {// 请求配置有误console.log('请求配置错误:', error.message);}console.log(error.config); // 请求配置});

7. 高级使用技巧

7.1 创建实例

创建具有自定义配置的Axios实例:

// 创建API实例
const apiClient = axios.create({baseURL: 'https://api.example.com/v1',timeout: 10000,headers: {'Content-Type': 'application/json','Accept': 'application/json'}
});// 使用实例发送请求
apiClient.get('/users').then(response => {console.log(response.data);
});

7.2 请求取消

使用CancelToken取消请求:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/api/user/123', {cancelToken: source.token
}).catch(error => {if (axios.isCancel(error)) {console.log('请求已取消:', error.message);} else {// 处理错误}
});// 取消请求
source.cancel('用户取消了操作');

7.3 并发请求

同时发送多个请求并等待所有请求完成:

function getUserAccount() {return axios.get('/user/account');
}function getUserPermissions() {return axios.get('/user/permissions');
}// 使用Promise.all处理并发请求
Promise.all([getUserAccount(), getUserPermissions()]).then(([account, permissions]) => {console.log('账户:', account.data);console.log('权限:', permissions.data);}).catch(error => {console.error('请求出错:', error);});// 使用axios.all和axios.spread
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread((account, permissions) => {console.log('账户:', account.data);console.log('权限:', permissions.data);}));

8. 最佳实践

8.1 API模块化

// api/index.js
import axios from 'axios';const apiClient = axios.create({baseURL: process.env.API_BASE_URL || 'https://api.example.com',timeout: 5000
});// 添加通用拦截器
apiClient.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});export default apiClient;// api/user.js
import apiClient from './index';export const userApi = {getProfile: () => apiClient.get('/user/profile'),updateProfile: (data) => apiClient.put('/user/profile', data),login: (credentials) => apiClient.post('/auth/login', credentials)
};// 使用方式
import { userApi } from './api/user';async function loadUserProfile() {try {const profile = await userApi.getProfile();// 处理用户信息} catch (error) {// 处理错误}
}

8.2 响应数据统一处理

// 定义统一响应结构
axios.interceptors.response.use(response => {// 假设API返回格式: { code: 0, message: 'success', data: {...} }const res = response.data;if (res.code !== 0) {// 处理业务错误Message.error(res.message || '操作失败');// 特定错误码处理if (res.code === 401) {// 清除登录状态并跳转store.dispatch('user/logout');router.push('/login');}return Promise.reject(new Error(res.message || '未知错误'));}return res.data;},error => {// 网络错误等处理Message.error('网络异常,请稍后重试');return Promise.reject(error);}
);

9. 性能优化技巧

9.1 数据缓存

// 简单的请求缓存实现
const cache = new Map();function getCachedData(url, params = {}) {const key = `${url}_${JSON.stringify(params)}`;if (cache.has(key)) {const cachedData = cache.get(key);// 检查缓存是否过期if (Date.now() - cachedData.timestamp < 60000) { // 1分钟缓存return Promise.resolve(cachedData.data);}}return axios.get(url, { params }).then(response => {cache.set(key, {data: response.data,timestamp: Date.now()});return response.data;});
}

9.2 防抖和节流

// axios防抖示例
import axios from 'axios';
import { debounce } from 'lodash';// 防抖搜索请求
const searchAPI = debounce((keyword, callback) => {axios.get('/api/search', { params: { q: keyword } }).then(response => callback(response.data)).catch(error => console.error('搜索失败', error));
}, 500); // 500ms内只发送一次请求// 使用
searchInput.addEventListener('input', function() {searchAPI(this.value, results => {// 更新搜索结果updateSearchResults(results);});
});

10. 与其他HTTP客户端对比

特性AxiosFetchjQuery Ajax
浏览器支持现代浏览器 + polyfill现代浏览器 + polyfill全部
Promise API有限支持
请求取消需AbortController
拦截器
自动JSON转换需手动转换
超时设置
下载进度
CSRF保护

总结

Axios作为一个功能丰富、使用简便的HTTP客户端库,凭借其优秀的API设计和强大的功能扩展性,成为现代前端开发中处理网络请求的首选工具。通过合理利用配置选项、拦截器、错误处理等机制,可以构建出高效、健壮的前端应用。在前端技术栈快速迭代的今天,掌握Axios的各种高级特性和最佳实践,对提升开发效率和应用质量具有重要意义。

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

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

相关文章

星越L_外后视镜使用讲解

目录 1.外后视镜调节 2后视镜折叠 3.后视镜加热 1.外后视镜调节 L控制左边后视镜调节,上下拨动调整视野,一般此镜左右21分,上下55开。 R控制左边后视镜调节,上下拨动调整视野,一般此镜左右13分,上下55开。 2后视镜折叠 车辆解锁自动展开 车辆关闭自动折叠 严寒天气…

2025-03-15 Python深度学习2——Numpy库

文章目录 1 基础1.1 数据类型1.1.1 整型数组与浮点型数组1.1.2 元素同化1.1.3 数组类型转换 1.2 数组维度1.2.1 一维数组与二维数组1.2.2 数组形状变换 2 创建数组2.1 创建指定数组2.2 创建递增数组2.3 创建同值数组2.4 创建随机数组 3 索引3.1 访问数组元素3.1.1 访问向量3.1.…

【Linux-传输层协议TCP】流量控制+滑动窗口+拥塞控制+延迟应答+捎带应答+面向字节流+粘包问题+TCP异常情况+TCP小结

5.流量控制 接收端处理数据的速度是有限的。如果发送端发的太快&#xff0c;导致接收端的缓冲区被打满&#xff0c;这个时候如果发送端继续发送就会造成丢包&#xff0c;继而引起丢包重传等等一系列连锁反应。 因此TCP 支持根据接收端的接收数据的能力来决定发送端发送数据的…

[C语言日寄] qsort函数的练习

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋&#xff1a;这是一个专注于C语言刷题的专栏&#xff0c;精选题目&#xff0c;搭配详细题解、拓展算法。从基础语法到复杂算法&#xff0c;题目涉及的知识点全面覆盖&#xff0c;助力你系统提升。无论你是初学者&#xff0c;还是…

C语言每日一练——day_8

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第八天。&#xff08;连续更新中&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…

python从邮件中提取链接中的符号为什么会变成amp; 解决办法

在Python中&#xff0c;从邮件中提取链接时&#xff0c;&符号变成&amp;是因为HTML实体编码。HTML使用&amp;表示&&#xff0c;以确保在浏览器中正确显示。 原因 HTML实体编码&#xff1a;&在HTML中有特殊含义&#xff0c;用于表示实体编码的开始。为了避免…

农业电商|基于SprinBoot+vue的农业电商服务系统(源码+数据库+文档)

农业电商服务系统 目录 基于SprinBootvue的农业电商服务系统 一、前言 二、系统设计 三、系统功能设计 5.1系统功能实现 5.2后台模块实现 5.2.1管理员模块实现 5.2.2商家模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码…

【JAVA】七、基础知识“if+switch+循环结构”详细讲解~简单易懂!

目录 7、逻辑控制 7.1 分支结构 7.1.1 if 语句 语法格式1 语法格式2 语法格式3 7.1.2 switch语句 基本语法 执行流程 7.2 循环结构 7.2.1 while循环 语法格式 7.2.2 Break 7.2.3 Continue 7.2.4 for循环 语法格式 执行过程 7.2.5 do while循环 语法格式 7.3 …

C# Exe + Web 自动化 (BitComet 绿灯 自动化配置、设置)

BitComet GreenLight,内网黄灯转绿灯 (HighID), 增加p2p连接率提速下载-CSDN博客 前两天写个这个&#xff0c;每次开机关机后要重来一遍很麻烦的索性写个自动化。 先还是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相关的 端口记录信息。 &#xff08;因为自…

JumpServer基础功能介绍演示

堡垒机可以让运维人员通过统一的平台对设备进行维护&#xff0c;集中的进行权限的管理&#xff0c;同时也会对每个操作进行记录&#xff0c;方便后期的溯源和审查&#xff0c;JumpServer是由飞致云推出的开源堡垒机&#xff0c;通过简单的安装配置即可投入使用&#xff0c;本文…

sqldef:一款免费的数据库变更管理工具

应用程序的升级通常伴随着数据库表结构的变更&#xff0c;为了维护各种环境的数据库变更&#xff0c;我们通常需要引入 Liquibase 或者 Flyaway 这样的数据库版本控制工具。不过&#xff0c;这类工具通常需要绑定某种编程语言&#xff0c;例如 Java&#xff1b;这次我们介绍一个…

行为模式---状态模式

概念 状态模式是一种行为模式&#xff0c;用于在内部状态改变的时候改变其行为。它的核心思想就是允许一个对象在其内部状态改变的时候改变它的行为。状态模式通过将对象的状态封装成独立的类&#xff0c;并将其行为委托给当前的状态对象&#xff0c;从而使得对象行为随着状态…

1688按图搜索商品(拍立淘)接口的参数说明【附代码实例】

阿里巴巴中国站按图搜索1688商品&#xff08;拍立淘&#xff09; API 返回值说明 item_search_img-按图搜索1688商品&#xff08;拍立淘&#xff09; 1688.item_search_img 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;se…

Linux文件管理练习

1、列出所有账号的账号名 切割显示-cut 作用&#xff1a;cut命令用于按列提取文本内容 格式: cut -d "分隔符" -f列数字 文件名 2、将/etc/passwd中内容按照冒号隔开的第三个字符从大到小排序后输出所有内容 排序显示-sort 作用:sort命令用于对文本内容进行排…

解决PC串流至IPad Pro时由于分辨率不一致导致的黑边问题和鼠标滚轮反转问题

问题背景 今天在做 电脑串流ipad pro 的时候发现了2个问题&#xff1a; 1.ipadpro 接上鼠标后&#xff0c;滚轮上下反转&#xff0c;这个是苹果自己的模拟造成的问题&#xff0c;在设置里选择“触控板与鼠标”。 关闭“自然滚动”,就可以让鼠标滚轮正向滚动。 2. ipadpro 分…

【数据结构初阶第十九节】八大排序系列(下篇)—[详细动态图解+代码解析]

hello&#xff0c;好久不见&#xff01; 云边有个稻草人-CSDN博客 上篇内容&#xff0c;回顾一下吧【数据结构初阶第十八节】八大排序系列(上篇)—[详细动态图解代码解析]-CSDN博客 今天我们来学习下篇 目录 &#xff08;2&#xff09;快速排序 【挖坑法】 —思路 —思路…

使用Open WebUI下载的模型文件(Model)默认存放在哪里?

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Ollama部署LLM专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年2月21日21点21分 &#x1f004;️文章质量&#xff1a;95分 文章目录 使用CMD安装存放位置 默认存放路径 Open WebUI下…

XSS漏洞学习(1)

XSS漏洞学习&#xff08;1&#xff09; HTTP协议回顾 HTTP的请求方式 常用 GET 请求从服务器获取资源 HEAD 类似于GET请求&#xff0c;只不过不会返回实体数据&#xff0c;只获取报头 POST 向服务器提交数据 PUT 替换服务器的内容 不常用 DELETE 请求服务器删除指定的…

【统计学相关笔记】抽样基本定理的证明

抽样基本定理的证明 法 1 法 2 什么是 辅助统计量&#xff1f; 法 3

基于Asp.net的物流配送管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…