Django5+Vue3:OA系统前后端分离项目实战-异步优化Ajax请求(12)

Django5+Vue3系列文章

前言

本节开始，全文仅对会员开放。

若点赞和收藏数量超过100，全文将免费开放。

此项目采用 Django 框架的 5.0.7 版本进行开发。

Django 5.0 支持的 Python 版本为 3.10、3.11 和 3.12。

OA 系统系列文章将持续更新，直至项目的 Docker 部署阶段。

专栏链接:  ~快捷传送门: 留个赞再走呗😭! ~

文章目录

目录

Django5+Vue3系列文章

前言

文章目录

一、async和await优点

二、Axios封装：HTTP请求

1.创建src\api\http.js文件，导入axios：

2.Http封装：多层封装

3. 定义开发生产环境变量

（1)分别在项目根目录创建.env.development和.env.production文件，定义环境变量

4.Http:封装login登录功能

1.新建src\api\authHttp.js文件，再次进行封装

三、异步编程优化login.vue

1.导入模块

2.注释原有方式，调用新方法 

四、登录验证 

总结

一、async和await优点

1. 代码简洁：让异步代码看起来像同步代码，减少嵌套和回调。
2. 易于理解：逻辑更直观，更容易上手。
3. 错误处理：使用 try...catch 简化异步代码的错误处理。
4. 避免回调地狱：减少深度嵌套的回调，使代码结构更清晰。
5. 并发处理：使用 Promise.all 可以同时处理多个异步操作

二、Axios封装：HTTP请求

1.创建src\api\http.js文件，导入axios：

~此处参考Axios官网：点个赞再走呗😭~

代码如下（示例）：

import axios from 'axios'

2.Http封装：多层封装

代码如下（示例）：

class Http {
    constructor() {
        // 创建一个 axios 实例，配置基础 URL 和超时时间
        this.instance = axios.create({
            baseURL: import.meta.env.VITE_BASE_URL, // 需定义环境变量获取基础 URL
            timeout: 6000, // 请求超时时间，单位为毫秒
        });
    }

    /**
     * 发送 POST 请求
     * @param {string} path - 请求的路径，例如：'/auth/login'
     * @param {Object} data - 请求体数据，通常为登录凭据