Ajax与Vue 生命周期核心笔记

前端异步交互必备知识点，简洁清晰，适合入门复习

目录

1. [什么是 Ajax](#什么是 Ajax)
2. [Axios 简介与基本使用](#Axios 简介与基本使用)
3. [Axios 请求方式别名（推荐）](#Axios 请求方式别名（推荐）)
4. [async / await 简化异步写法](#async / await 简化异步写法)
5. [Vue 生命周期](#Vue 生命周期)

---

1. 什么是 Ajax

• 全称：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML
• 作用
  • 数据交换：通过 Ajax 给服务器发送请求，获取响应数据
  • 异步交互：不重新加载整个页面，即可更新部分网页内容
    典型场景：搜索联想、用户名重复校验等
• XML：可扩展标记语言，本质是一种数据格式，用于存储复杂数据结构

---

2. Axios 简介与基本使用

• 介绍：Axios 对原生 Ajax 进行封装，简化书写，提升开发效率
• 官网：https://www.axios-http.cn/

使用步骤

1. 引入 Axios 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 发送请求并处理结果

axios({
    method: 'GET',
    url: 'https://web-server.itheima.net/emps/list'
}).then((result) => {  // 成功回调
    console.log(result.data);
}).catch((err) => {   // 失败回调
    alert(err);
});

常用配置项

• method：请求方式 GET/POST
• url：请求地址
• data：POST 请求携带的数据
• params：URL 拼接参数（?key=value）

---

3. Axios 请求方式别名（推荐）

格式：axios.请求方式(url [, data] [, config])

GET 请求示例

axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list')
.then((result) => {
    console.log(result.data);
}).catch((err) => {
    console.log(err);
});

POST 请求示例

axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1')
.then((result) => {
    console.log(result.data);
}).catch((err) => {
    console.log(err);
});

---

4. async / await 简化异步写法

• 作用：让异步代码以同步风格书写，可读性更强
• 示例

methods: {
  async search(){
    // 等待请求完成并直接获取结果
    let result = await axios.get('https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx');
    this.employees = result.data.data;
  }
}

• 注意
  • await 必须在 async 函数内部使用
  • await 替代 .then()，直接接收成功响应结果

---

5. Vue 生命周期

• 定义：一个 Vue 实例/组件从创建到销毁的整个过程
• 八大生命周期钩子

阶段	钩子函数
创建前	beforeCreate
创建后	created
载入前	beforeMount
挂载完成	mounted
数据更新前	beforeUpdate
数据更新后	updated
组件销毁前	beforeUnmount
组件销毁后	unmounted

常用示例（mounted）

<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

const app = createApp({
  data() {
    return {
      message: "Hello Vue"
    }
  },
  // 挂载完成：页面渲染后自动执行
  mounted() {
    console.log('Vue 挂载完毕，发送请求获取数据...');
  }
}).mount("#app");
</script>

---