【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.jspostApi.js

在http.js中,添加如下代码------

javascript 复制代码
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中,添加如下的代码------

javascript 复制代码
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的示例如下------

javascript 复制代码
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】

相关推荐
河畔一角7 分钟前
一些感悟
前端
excel13 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子43 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑1 小时前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了1 小时前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook3 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug