前端HTML编程6：ES6与前后端交互

// 传统函数
function add(a, b) {
    return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

// 单个参数可省略括号
const square = x => x * x;

// 多行需加大括号和 return
const greet = name => {
    const msg = `Hello, ${name}!`;
    return msg;
};

// 返回对象需加括号
const createUser = name => ({ name, age: 25 });

注意：箭头函数没有自己的 this，在对象方法中要注意使用场景。

演示案例：

效果演示：

3.2 模板字符串

const name = "Alice";
const age = 25;

const msg = `Hello, ${name}! You are ${age} years old.`;

const html = `
<div class="user">
  <h2>${name}</h2>
  <p>Age: ${age}</p>
</div>
`;

支持表达式和多行拼接。

演示案例：

效果演示：

3.3 解构赋值

// 数组解构
const [a, b, c] = [1, 2, 3];

// 对象解构
const user = { name: "Alice", age: 25 };
const { name, age } = user;

// 函数参数解构
function greet({ name, age }) {
    return `Hello ${name}, you are ${age}`;
}

案例演示：

效果演示：

3.4 展开运算符

// 数组展开
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

3.5 练习示例

function showUser({ name, age, email = "未设置" }) {
    return `
======== 用户信息 ========
姓名: ${name}
年龄: ${age}
邮箱: ${email}
========================
    `.trim();
}

console.log(showUser({ name: "Alice", age: 25 }));

四、Promise 基础与异步操作

核心概念

Promise 状态：

Pending（进行中）
Fulfilled（已成功）
Rejected（已失败）

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const success = true;
        if (success) resolve("操作成功");
        else reject("操作失败");
    }, 1000);
});

promise
    .then(result => console.log("成功:", result))
    .catch(error => console.error("失败:", error))
    .finally(() => console.log("完成"));

案例演示：

效果演示：

Promise 常用方法

// 并行执行
Promise.all([fetch("/api/a"), fetch("/api/b")]);

// 竞速执行
Promise.race([fetch("/api/a"), fetch("/api/b")]);

练习示例

function mockAPI() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() < 0.8) resolve({ code: 200, data: ["item1","item2"] });
            else reject({ code: 500, message: "服务器错误" });
        }, 1000);
    });
}

mockAPI()
    .then(res => console.log("成功:", res))
    .catch(err => console.error("失败:", err));

五、async/await 语法

async function getUser() {
    try {
        const response = await fetch("/api/user");
        const user = await response.json();
        return user;
    } catch (error) {
        console.error("获取失败:", error);
        throw error;
    }
}

// 并行请求
async function loadData() {
    const [users, orders] = await Promise.all([fetch("/api/users"), fetch("/api/orders")]);
}

注意：async 函数默认返回 Promise。

六、ES6 模块化

导出

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default class Calculator { add(a,b){return a+b;} }

导入

import { PI, add } from "./math.js";
import Calculator from "./math.js";
const calc = new Calculator();

动态导入

async function loadModule() {
    const module = await import("./math.js");
    console.log(module.add(3,4));
}

七、fetch/axios 请求基础

fetch

const response = await fetch("/api/users");
if (!response.ok) throw new Error("请求失败");
const data = await response.json();

axios

import axios from "axios";
const api = axios.create({ baseURL: "http://localhost:8000" });
const { data } = await api.get("/users");

对比：

fetch：浏览器内置，需手动解析 JSON，错误需手动处理
axios：功能更完善，支持拦截器、超时、进度监控

八、综合项目实战——AI 对话应用

项目功能

封装 API 模块
消息发送和接收
加载状态显示
错误处理
历史消息渲染

流程图

核心代码示例

api.js

const BASE_URL = "http://localhost:8000";
export async function sendMessage(message){
    const res = await fetch(`${BASE_URL}/chat`,{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify({ message })
    });
    if (!res.ok) throw new Error(`请求失败: ${res.status}`);
    return res.json();
}

app.js

import { sendMessage } from "./api.js";
const chatBox = document.getElementById("chat-box");
const input = document.getElementById("message-input");
const sendBtn = document.getElementById("send-btn");

function appendMessage(role, content){
    const div = document.createElement("div");
    div.className = `message ${role}`;
    div.innerHTML = `<strong>${role==="user"?"你":"AI"}:</strong> ${content}`;
    chatBox.appendChild(div);
    chatBox.scrollTop = chatBox.scrollHeight;
}

async function handleSend(){
    const message = input.value.trim();
    if(!message) return;
    appendMessage("user", message);
    input.value = "";
    sendBtn.disabled = true;
    try{
        const data = await sendMessage(message);
        appendMessage("ai", data.reply || "未获取到回复");
    } catch(e){
        appendMessage("ai", `请求失败: ${e.message}`);
    } finally{
        sendBtn.disabled = false;
    }
}

sendBtn.addEventListener("click", handleSend);
input.addEventListener("keypress", e=>{
    if(e.key==="Enter") handleSend();
});

index.html 页面结构可参考前面示例。

九、总结

箭头函数、模板字符串、解构赋值
Promise 异步处理
async/await 编写异步代码
ES6 模块化
fetch/axios 请求及错误处理
前后端数据交互实现

本文结合了 ES6 核心语法与前后端交互的实战经验，如果对你的学习有帮助的话，可以点点免费的赞赞支持一下，谢谢各位！

每日励志文案：

先完成，再完美

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

G-Star 精选开源项目推荐｜第十九期

BuildAdmin 是一个基于 Vue 3、ThinkPHP 6、TypeScript、Vite、Pinia 和 Element Plus 的后台管理系统，面向中后台业务系统快速开发场景。项目提供可视化 CRUD 代码生成、权限管理、Web 终端、数据回收站、字段级修改保护等能力，帮助开发者减少重复后台开发工作。对于需要快速搭建管理后台、业务配置台或二开系统的团队来说，它提供了一套相对完整的工程