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

前言

开篇语

本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。 如果您需要为面试八股文做准备，笔者建议重点关注加粗强调部分，它们是概念中的关键词。

准备工作

软件：【参考版本】Visual Studio Code 第三方js库（框架）：【参考版本】Vue3，Axios（ver1.7.9） 搭建工具：Vite 系统版本： Win10/11

正文

概念

为了实现前后端交互，在前端我们需要向后端接口发送http请求 ，并根据反馈的结果进行数据的渲染。在Vue3中，我们可以使用第三方库Axios 实现这一功能。 Axios是一个基于Promise 的http客户端，用于浏览器和 Node.js 环境。它提供了简单易用的API，用于发送http请求并处理响应。它提供了请求拦截器 和响应拦截器 ，可以在请求发送前或响应到达后对其进行处理，如添加认证头、处理错误等。此外，Axios会自动将请求和响应的JSON数据 转换为JavaScript对象，无需手动解析。 本文中的开发环境为Windows10，使用npm安装Axios。

封装工具包

对于项目开发来说，发送Http是一种非常常见的需求，因此我们可以将发送请求的共同代码封装为工具包，以降低代码冗余度，同时方便开发。 新建一个utils工具包（如果没有创建的话），新建两个js文件——http.js 和postApi.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】