【H2O2 | 软件开发】Axios发送Http请求

server/2025/3/14 16:19:43/

目录

前言

开篇语

准备工作

正文

概念

封装工具包

示例

结束语


前言

开篇语

本系列为短篇,每次讲述少量知识点,无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的,希望对诸位有所帮助。

如果您需要为面试八股文做准备,笔者建议重点关注加粗强调部分,它们是概念中的关键词。

准备工作

软件:【参考版本】Visual Studio Code

第三方js库(框架):【参考版本】Vue3,Axios(ver1.7.9)

搭建工具:Vite

系统版本: Win10/11

正文

概念

为了实现前后端交互,在前端我们需要向后端接口发送http请求,并根据反馈的结果进行数据的渲染。在Vue3中,我们可以使用第三方库Axios实现这一功能。

Axios是一个基于Promisehttp客户端,用于浏览器和 Node.js 环境。它提供了简单易用的API,用于发送http请求并处理响应。它提供了请求拦截器响应拦截器,可以在请求发送前或响应到达后对其进行处理,如添加认证头、处理错误等。此外,Axios会自动将请求和响应的JSON数据转换为JavaScript对象,无需手动解析。

本文中的开发环境为Windows10,使用npm安装Axios

封装工具包

对于项目开发来说,发送Http是一种非常常见的需求,因此我们可以将发送请求的共同代码封装为工具包,以降低代码冗余度,同时方便开发。

新建一个utils工具包(如果没有创建的话),新建两个js文件——http.jspostApi.js

http.js中,添加如下代码——

import axios from "axios";const instance = axios.create({timeout: 3000,headers: { "X-Custom-Header": "foobar" },
});// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);export default instance;

然后,在postApi.js中,添加如下的代码——

import http from "@/utils/http"export const postApi = (routePath, params = null) => {// 接口路径添加/api以配置跨域,根据后端给的接口来const path = '/api' + routePath;if (params != null) {// 需要FormData类型数据作为参数const formData = new FormData();Object.entries(params).forEach(([key, value]) => {formData.append(key, value)})return http.post(path, formData)} else {// 不需要参数return http.post(path)}
}

这里演示的是发送post请求的方式,如果需要发送get请求,则可以类比使用http.get(path)。

示例

在项目中,一个实际的发送Axios的示例如下——

const handleLogin = () => {formLogin.value.validate().then(async () => {try {// 向登录接口发送登录请求信息const res = await postApi('/login', data.user);if (res.code == 200) {ElMessage({message: '登录成功',type: 'success',duration: 1000});setTimeout(async () => {// 解构用户信息并存储const { userId, userName, superAdmin, menuList, permissionCodeList } = res.data;const user = { userId, userName, superAdmin };await store.dispatch('setUserAction', { user, menuList, permissionCodeList });// 跳转主页if (menuList.length > 0) {router.push("/main");}}, 1200);} else {// 返回登录失败信息ElMessage.error(res.info);// 重新获取验证码data.src = '/api/checkCode?' + (Math.random().toString().replace(".", ""));data.user.checkCode = "";}} catch (err) {ElMessage.error(err);}}).catch(err => {ElMessage.error(JSON.stringify(err));})
}

该示例结合了Element-Plus组件,简单实现了发送用户账户密码信息完成登录请求的功能。

结束语

本期内容到此结束。关于本系列的其他博客,可以查看我的面试题专栏。

本系列的博客主要是记录学习经历,并总结阶段的知识点。全篇的操作过程由笔者完成并核验,在部分定义上有参考其他的内容。希望这对您有所帮助,并真心地祝您早日找到心仪的工作岗位。

==期待与你在下一期博客中再次相遇==

——分解的【H2O2】


http://www.ppmy.cn/server/174925.html

相关文章

概率论的基本知识

逆概率还不懂,改天再想想。 联合概率 联合概率(Joint Probability) 是概率论中的一个重要概念,用于描述多个随机变量同时取某些值的概率。联合概率可以帮助我们理解多个变量之间的关系。

Python编程中常见的10个案例

文章目录 1. Hello, World!2. 计算斐波那契数列3. 文件读写4. 列表推导式5. 异常处理6. 函数定义与调用7. 类和对象8. 使用模块9. 网络请求10. 数据可视化总结 1. Hello, World! 这是学习任何编程语言时的第一个程序。 代码示例 print("Hello, World!")2. 计算斐波…

请简述一下String、StringBuffer和“equals”与“==”、“hashCode”的区别和使用场景

在 Java 中,String 和 StringBuffer 是两种不同的字符串处理类,而 equals() 方法和 操作符、hashCode() 方法在字符串比较和哈希表操作中有不同的用途和语义。以下是它们的区别和使用场景的详细说明: 1. String 和 StringBuffer 的区别 1.1…

Vue.js 基础入门:从零开始构建你的第一个 Vue 应用

Vue.js 是一个轻量级、易上手的渐进式 JavaScript 框架,广泛用于构建现代化的用户界面。无论你是前端新手还是有一定经验的开发者,Vue.js 都能帮助你快速构建高效、可维护的 Web 应用。本文将带你从零开始学习 Vue.js 的基础知识,并完成一个简…

AI自动化编程初探

先说vscodeclinemodelscope方案,后面体验trae或者cursor再写写其它的。vscode和trae方案目前来说是免费的,cursor要用claud需要付费,而且不便宜,当然效果可能是最好的。 vscode方案,我的经验是最好在ubuntu上&#xff…

工业物联网平台系列技术介绍-分类、聚类、逻辑回归

前言 工业物联网平台在运行过程中,设备运行数据、传感器数据等如潮水般涌现,这些数据类型丰富,涵盖设备的实时状态、性能参数、环境监测数值等。面对如此规模与复杂度的数据,亟需高效的数据处理与分析手段。分类、聚类、逻辑回归…

MongoDB 介绍与部署

MongoDB 的 Schema-less(无模式)特性 MongoDB 不需要提前定义表结构(Schema),可以存储不同结构的文档(JSON/BSON),这与传统的 SQL 关系型数据库(RDBMS)有很大…

OpenAI智能体初探:使用 OpenAI Responses API 在 PDF 中实现检索增强生成(RAG)

大家好,我是大 F,深耕AI算法十余年,互联网大厂技术岗。 知行合一,不写水文,喜欢可关注,分享AI算法干货、技术心得。 欢迎关注《大模型理论和实战》、《DeepSeek技术解析和实战》,一起探索技术的无限可能! 引子 在信息爆炸的时代,从大量 PDF 文档中快速准确地检索信息…