05 - Axios 前后端对接教程 / HTTP

视频链接：BV1rM4m117Ry

发布日期：2024-07-08

视频时长：05:52

播放量：13.8万

所属合集：零基础AI全栈开发系列

视频概要

从纯前端过渡到全栈的关键桥梁。讲解HTTP请求协议和Axios库的使用，实现前端与后端的数据交互。覆盖GET/POST/PUT/DELETE四种请求方法、请求/响应结构、错误处理、在Vue中集成Axios等内容。

知识点清单

A. HTTP协议基础

B. HTTP请求方法详解

C. Axios 使用方法

// 安装: npm install axios
import axios from 'axios';

// ========== GET请求：获取列表 ==========
axios.get('https://api.example.com/get_list')
    .then(response => {
        console.log(response.data);  // 响应数据
    })
    .catch(error => {
        console.error(error);        // 错误处理
    });

// ========== POST请求：添加数据 ==========
axios.post('https://api.example.com/add', {
    name: "新项目",
    description: "描述信息"
})
    .then(response => {
        console.log("添加成功", response.data);
    });

// ========== PUT请求：更新数据 ==========
axios.put('https://api.example.com/update/1', {
    name: "更新后的名称"
});

// ========== DELETE请求：删除数据 ==========
axios.delete('https://api.example.com/delete/1');

// ========== 携带请求头 ==========
axios.get('https://api.example.com/data', {
    headers: {
        'Authorization': 'Bearer token123',
        'Content-Type': 'application/json'
    }
});

// ========== 错误处理 ==========
axios.get('https://api.example.com/data')
    .then(res => {
        if (res.data.code === 200) {
            // 成功
        }
    })
    .catch(err => {
        if (err.response) {
            // 服务端返回了错误状态码
            console.log(err.response.status); // 404, 500等
        } else {
            // 网络错误
            console.log("网络异常");
        }
    });

D. 前后端对接完整流程

┌──────────────┐     HTTP请求      ┌──────────────┐
│              │  ───────────────→  │              │
│   前端(Vue)  │                    │  后端(Node)  │
│              │  ←───────────────  │              │
└──────────────┘     JSON响应      └──────────────┘

1. 用户操作触发事件（如点击按钮）
2. 前端通过 Axios 发送HTTP请求到后端API地址
3. 后端接收请求，查询数据库，处理业务逻辑
4. 后端返回JSON格式的响应数据
5. 前端接收数据，更新页面显示

E. 在Vue中使用Axios（完整示例）

<template>
    <div>
        <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加任务...">
        <button @click="addTodo">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.name }}
                <button @click="deleteTodo(item.id)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const list = ref([]);
const newTodo = ref("");

// 获取列表
const fetchList = async () => {
    try {
        const res = await axios.get('https://api.example.com/get_list');
        list.value = res.data;
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};

// 添加任务
const addTodo = async () => {
    if (!newTodo.value.trim()) return;
    await axios.post('https://api.example.com/add', { name: newTodo.value });
    newTodo.value = "";
    fetchList(); // 刷新列表
};

// 删除任务
const deleteTodo = async (id) => {
    await axios.delete('https://api.example.com/delete/' + id);
    fetchList(); // 刷新列表
};

// 页面加载时自动获取
onMounted(() => {
    fetchList();
});
</script>

F. HTTP请求/响应结构

// ========== 请求(Request) ==========
POST /add HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer token123

{"name": "新项目", "description": "描述"}

// ========== 响应(Response) ==========
HTTP/1.1 200 OK
Content-Type: application/json

{"code": 200, "data": {...}, "message": "成功"}

G. 常见状态码

常见问题

前置知识检查

• [x] 了解JavaScript的函数和异步概念
• [x] 了解Vue的 onMounted 生命周期
• [x] 知道什么是URL地址

学习建议

• 本集是前后端联通的关键，理解了HTTP就理解了Web开发的核心
• 不需要记住所有状态码，重点理解200、404、500
• 接口地址现在用的是别人的，下一集学Node.js后就能自己创建
• async/await是处理异步的推荐方式，比.then()链式调用更清晰