掌握axios与Vue 3:构建高效HTTP请求的终极指南

引言

axios作为一个广泛使用的JavaScript库,因其简洁的API、强大的功能和良好的浏览器兼容性,成为了许多前端开发者在Vue 3项目中的首选。

 axios简介

axios是什么?

axios是一个基于Promise的HTTP客户端,用于浏览器和node.js环境中。它允许开发者以一种简洁的方式发送异步HTTP请求到REST endpoints,并处理响应。axios支持请求和响应拦截器、自动转换JSON数据、客户端支持防御XSRF等特性。

axios的主要特点和优势
  • 基于Promise:axios使用Promise,这是现代JavaScript中处理异步操作的标准方式。
  • 浏览器和Node.js兼容:axios可以在前端和后端环境中使用,方便前后端代码共享。
  • 请求和响应拦截器:可以添加拦截器来处理请求或响应,例如添加认证令牌、日志记录等。
  • 自动转换JSON数据:axios会自动将JSON字符串转换为JavaScript对象,反之亦然。
  • 支持请求取消:可以取消正在进行的请求。
  • 支持请求和响应的配置:可以对请求和响应进行详细的配置,如超时设置、自定义HTTP头等。
axios的基本使用方法(GET、POST请求示例)

GET请求示例

// 使用axios发送GET请求
axios.get('https://api.example.com/data').then(function (response) {// 处理成功情况console.log(response.data);}).catch(function (error) {// 处理错误情况console.error(error);});

POST请求示例

// 使用axios发送POST请求
axios.post('https://api.example.com/data', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {// 处理成功情况console.log(response.data);}).catch(function (error) {// 处理错误情况console.error(error);});

在这些示例中,我们使用了axios的.get().post()方法来发送GET和POST请求。每个方法都返回一个Promise对象,该对象在请求成功时解决,并在请求失败时拒绝。通过.then().catch()方法,我们可以处理成功的响应和错误情况。

这些基本的使用方法是axios的核心,通过它们,开发者可以轻松地在Vue 3应用中实现与后端服务的交互。

安装和配置axios

1.使用npm安装axios:

npm install axios

2.或者使用yarn安装axios:

yarn add axios

3.同样可以通过pnpm来安装axios。但是我们首先确保项目中已经安装了pnpm。如果还没有安装,可以通过npm或yarn来安装pnpm:

npm install -g pnpm

或者

yarn global add pnpm

安装完成后,你可以使用pnpm来安装axios:

pnpm add axios

实战阶段

我们可以将封装好的HTTP请求模块命名为request.js,并使用request作为导入的别名。以下是创建一个名为request.js的封装好的HTTP请求模块的示例:

// request.js
import axios from 'axios';// 创建axios实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // API的基础URLtimeout: 5000 // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 在这里可以添加一些请求前的操作,例如添加tokenreturn config;},error => {// 请求错误处理console.error('Request Error:', error);return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做点什么return response.data;},error => {// 响应错误处理console.error('Response Error:', error);return Promise.reject(error);}
);export default service;

然后,在你的Vue 3组件中,你可以通过导入上面创建的request.js模块来发送HTTP请求:

// MyComponent.vue
<script setup>
import { ref } from 'vue';
import request from './request'; // 假设request.js位于同一目录下const fetchData = async () => {try {const response = await request.get('/some-endpoint');// 处理响应数据console.log(response);} catch (error) {// 处理错误console.error('Error fetching data:', error);}
};// 调用fetchData以获取数据
fetchData();
</script>

在这个示例中,我们使用request作为导入的别名,这样在调用请求方法时,代码更加简洁明了。通过这种方式,你可以轻松地在多个组件中重用HTTP请求逻辑,同时保持代码的清晰和组织性。此外,你还可以根据需要进一步封装更多的请求方法(如POST、PUT、DELETE等),以及添加更多的配置和错误处理逻辑。

请求和响应拦截器的高级配置(以pinia为例子)

在Pinia中获取token

首先,确保您已经在Pinia中定义了相应的store,并且该store中包含了token。例如:

// stores/auth.js
import { defineStore } from 'pinia';export const useAuthStore = defineStore('auth', {state: () => ({token: null,}),actions: {setToken(newToken) {this.token = newToken;localStorage.setItem('token', newToken);},removeToken() {this.token = null;localStorage.removeItem('token');},},
});

然后,在请求拦截器中,您可以从Pinia的store中获取token并添加到请求头中:

// request.js
import axios from 'axios';
import { useAuthStore } from '../stores/auth'; // 假设您的Pinia store文件位于此路径const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000,
});service.interceptors.request.use(config => {const authStore = useAuthStore();const token = authStore.token;if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {console.error('Request Error:', error);return Promise.reject(error);}
);export default service;

在响应拦截器中进行数据转换、错误重试等操作

响应拦截器可以用来处理服务器返回的数据,例如转换数据格式或处理特定的错误。以下是如何在响应拦截器中进行数据转换和错误重试的示例:

// request.js
// ...之前的代码service.interceptors.response.use(response => {// 假设服务器返回的数据格式为JSON,且包含data字段const data = response.data;// 可以根据需要对数据进行转换或处理return data;},error => {// 响应错误处理// 例如,如果响应状态码为401(未授权),则可能需要重新登录if (error.response && error.response.status === 401) {// 重定向到登录页面router.push('/login');}// 如果响应状态码为429(请求过多),则可以进行错误重试if (error.response && error.response.status === 429) {// 重试逻辑console.log('Request was rate limited, retrying...');// 可以在这里实现重试逻辑,例如使用递归调用或使用第三方库}return Promise.reject(error);//这行代码的意思是返回一个被拒绝的Promise对象,并将error作为拒绝的原因}
);export default service;

资料推荐

1.axios官方文档:Axios中文文档 | Axios中文网

2.Vue.js官方文档:https://cn.vuejs.org/

3.Pinia官方文档:Pinia | The intuitive store for Vue.js

总结

axios是一个功能强大的HTTP客户端库,它使用Promise来处理异步请求,非常适合在Vue 3项目中使用

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

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

相关文章

【视频】R语言广义加性模型GAMs非线性效应、比较分析草种耐寒性实验数据可视化

全文链接&#xff1a;https://tecdat.cn/?p36979 原文出处&#xff1a;拓端数据部落公众号 广义加法模型&#xff08;Generalized Additive Models, GAMs&#xff09;作为一种高度灵活的统计工具&#xff0c;显著扩展了广义线性模型&#xff08;Generalized Linear Models, …

我被手机所伤,竟如此憔悴。

临睡前&#xff0c;刚刷完小视频&#xff0c;感觉好无聊。一阵阵空虚感袭来。看看时间&#xff0c;哦&#xff0c;原来我下班后一直从6点刷视频到11点。 哎&#xff0c;太空虚了&#xff0c;又马上要睡觉了&#xff0c;为什么会这么难受呢?明明我大学&#xff0c;高中&#x…

代码随想录算法训练营第9天

151.反转字符串中的单词 题目链接&#xff1a;151. 反转字符串中的单词 - 力扣&#xff08;LeetCode&#xff09; 视频链接&#xff1a;代码随想录 (programmercarl.com) 第一想法 使用split函数然后倒序相加 代码随想录想法 先去除空格&#xff0c;再将整个字符串反转&…

Android11 应用启动流程

应用层调用startActivity&#xff0c;会跨进程调用导致ATMS的startActivityAsUser方法被调用 //frameworks/base/services/core/java/com/android/server/wm/ActivityTaskManagerService.java private int startActivityAsUser(IApplicationThread caller, String callingPack…

数字信号处理及MATLAB仿真(4)——量化的其他概念

上回书说到AD转换的两个步骤——量化与采样两个步骤。现在更加深入的去了解以下对应的概念。学无止境&#xff0c;要不断地努力才有好的收获。万丈高楼平地起&#xff0c;唯有打好基础&#xff0c;才能踏实前行。 不说了&#xff0c;今天咱们继续说说这两个步骤&#xff0c;首先…

每日刷题(二分图,二分查找,dfs搜索)

目录 1.P3853 [TJOI2007] 路标设置 2.P1129 [ZJOI2007] 矩阵游戏 3.P1330 封锁阳光大学 4.Trees 5.P1141 01迷宫 1.P3853 [TJOI2007] 路标设置 P3853 [TJOI2007] 路标设置 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 先求出每个路标之间的距离&#xff0c;再二分查找每…

新媒体运营都需要掌握哪些技术?沈阳新媒体运营免费培训

新媒体运营需要掌握的技术包括内容创作、FAB产品介绍法、用户运营、社群运营、活动策划和数据分析。这个岗位在现代社会中的重要性日益突出&#xff0c;随着互联网的发展&#xff0c;新媒体已成为人们获取信息的主要渠道之一&#xff0c;而新媒体运营则是通过各种新媒体平台进行…

数据库系统原理练习 | 作业2-第2章关系数据库(附答案)

整理自博主本科《数据库系统原理》专业课完成的课后作业&#xff0c;以便各位学习数据库系统概论的小伙伴们参考、学习。 *文中若存在书写不合理的地方&#xff0c;欢迎各位斧正。 专业课本&#xff1a; 目录 一、选择题 二、填空题 三、简答题 四、关系代数 1.课本p70页&…

hive中reverse函数

目录 前言基本函数介绍实战 前言 reverse函数&#xff0c;是一个常用的字符串处理函数&#xff0c;很多编程语言都有。最近开发中&#xff0c;遇到一个reverse解决的需求&#xff0c;发现自己尚未总结过&#xff0c;遂补上。 基本函数介绍 SELECT reverse(string_column) FR…

虚拟机安装Linux CENTOS 07 部署NET8 踩坑大全

首先下载centos07镜像&#xff0c;建议使用阿里云推荐的地址&#xff1a; https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spma2c6h.25603864.0.0.59b5f5ad5Nfr0X 其实这里就已经出现第一个坑了 centos 07 /usr/lib64/ 的 libstdc.so只支持到19&#xff1b; GLI…

数据湖表格式 Hudi/Iceberg/DeltaLake/Paimon TPCDS 性能对比(Spark 引擎)

当前&#xff0c;业界流行的集中数据湖表格式 Hudi/Iceberg/DeltaLake&#xff0c;和最近出现并且在国内比较火的 Paimon。我们现在看到的很多是针对流处理场景的读写性能测试&#xff0c;那么本篇文章我们将回归到大数据最基础的场景&#xff0c;对海量数据的批处理查询。本文…

Java中的线程同步机制有哪些?

Java中的线程同步机制是一套用于协调线程间的数据访问及活动的机制&#xff0c;该机制用于保障线程安全以及实现这些线程的共同目标。Java平台提供的线程同步机制主要包括以下几个方面&#xff1a; 1. 锁&#xff08;Lock&#xff09; 锁是Java中最基本的线程同步机制之一&am…

飞书、钉钉、企业微信的大模型“三国杀”

文&#xff1a;互联网江湖 作者&#xff1a;刘致呈 曾经在一次内部的周年会上&#xff0c;字节跳动CEO梁汝波曾表示对飞书和火山引擎的研发投入不低于抖音和TikTok。言下之意&#xff0c;飞书在字节内部的重要性比肩抖音。 业务的重要性从时间上也看得出来&#xff0c;要知道…

静态时序分析:Leaf Cell(叶单元)

相关阅读​​​​​​​静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html 在DC中&#xff0c;leaf cell&#xff08;叶单元&#xff09;有时会出现在描述中&#xff0c;例如set_input_delay的-reference_pin选项的参数&#xff0c;就必须是一个端口或…

C# Winform之propertyGrid控件使用详解和分组设置

PropertyGrid 控件在 WinForms 中是一个非常有用的工具&#xff0c;它允许用户查看和编辑一个对象的属性。这个控件非常适合用于配置对话框或任何需要动态显示对象属性的地方。下面我会详细介绍 PropertyGrid 的使用方法和如何对属性进行分组。 使用详解 1. 添加 PropertyGri…

《昇思25天学习打卡营第18天|onereal》

RNN实现情感分类 概述 情感分类是自然语言处理中的经典任务&#xff0c;是典型的分类问题。本节使用MindSpore实现一个基于RNN网络的情感分类模型&#xff0c;实现如下的效果&#xff1a; 输入: This film is terrible 正确标签: Negative 预测标签: Negative输入: This film…

AI版Siri要明年见,研究表明ChatGPT暂无法取代程序员,Kimi推出浏览器插件

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 更多资源欢迎关注 根据彭博社记者马克古尔曼的最新消息&#xff0c;苹果公司今年不会推出全新的Apple Intelligence驱动的Siri&#xff0c;该公司计划在明年1月开始测试&#xff0c;并在iOS 18.4中才推出正式版本。 此前…

景联文科技以高质量多模态数据集赋能AI大模型,精准匹配提升模型性能

在人工智能的浪潮中&#xff0c;语料数据如同建筑的基石&#xff0c;其质量、规模和运用策略直接决定了AI模型的表现和应用的广泛性。 景联文科技在AI领域深耕多年&#xff0c;打磨了高质量多模态数据集&#xff0c;致力于为不同训练阶段的算法精准匹配高质量数据资源。 3000万…

STM32中断(NVIC和EXIT)

CM3 内核支持 256 个中断&#xff0c;其中包含了 16 个内核中断和 240个外部中断&#xff0c;并且具有 256 级的可编程中断设置。但STM32 并没有使用CM3内核的全部东西&#xff0c;而是只用了它的一部分。STM32有 76 个中断&#xff0c;包括16 个内核中断和 60 个可屏蔽中断&am…

Dify中的RAG和知识库

一.RAG 基本架构 当用户提问 “美国总统是谁&#xff1f;” 时&#xff0c;系统并不是将问题直接交给大模型来回答&#xff0c;而是先将用户问题在知识库中进行向量搜索&#xff0c;通过语义相似度匹配的方式查询到相关的内容&#xff08;拜登是美国现任第46届总统…&#xff0…