1. 跨域（CORS）#

浏览器有同源策略：协议、域名、端口三者只要有一个不同，就属于”跨域”请求，浏览器会额外检查服务端有没有”允许你这个来源访问”的响应头。

• 我们的页面（用 Live Server 打开时是 http://127.0.0.1:5500）去请求 https://web-server.itheima.net/...——域名和端口都不同，就是跨域；
• 课程的接口服务器返回了 Access-Control-Allow-Origin: *（允许任何来源），所以能正常拿到数据；
• 换成自己写的后端时，如果忘了配置跨域，浏览器控制台会报 has been blocked by CORS policy，.catch 里拿到的是 Network Error。

2. 请求地址、方式、参数名要和接口文档一致#

案例里 GET 的查询参数是用模板字符串拼到地址上的（20 篇学的反引号）：

1
// 三个条件拼在 ? 后面，用 & 连接
2
let url = `https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`;
3
let result = await axios.get(url);

1
let url = `https://web-server.itheima.net/emps/list?name=${encodeURIComponent(this.searchForm.name)}`;

1
let result = await axios.get('https://web-server.itheima.net/emps/list', {
2
  params: { name: this.searchForm.name, gender: this.searchForm.gender, job: this.searchForm.job }
3
});

3. 返回值的”层数”要和接口文档对上#

result.data 还是 result.data.data，取决于后端包了几层——先 console.log 看清楚再写（前面那一节讲过）。

4. 接口没起来时，页面是什么表现#

练这一章时最常见的场景：后端没启动、地址写错、断网。这时候的现象一定要会认——因为”看着像白屏”的锅常常不在你的代码：

一、知识回顾（读完直接做下面的实践题）#

1. Ajax = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）；XML 是 Extensible Markup Language（可扩展标记语言），本质是一种数据格式，可存储复杂数据结构（现在实际都用 JSON）
2. Ajax 的两大作用：数据交换（给服务器发送请求、获取服务器响应的数据）、异步交互（不重新加载整个页面的情况下交换数据并更新部分网页）；典型例子：搜索联想、用户名/邮箱是否可用校验
3. 同步 vs 异步：同步要等服务器处理完才能继续（”……等待……”）；异步发完请求就不阻塞，等待期间客户端可以执行其他操作，结果回来后由回调函数处理
4. Axios 是对原生 Ajax 的封装，简化书写、快速开发（官网 https://www.axios-http.cn/）；两步走：**引入 Axios 的 js 文件** → 使用 Axios 发送请求并获取响应结果
5. 引入方式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>（在线）或 <script src="js/axios.js"></script>（本地）；是普通脚本（不用 type="module"、不用 import），全局 axios 直接用
6. 基本写法：axios({ method, url, data, params }).then(成功回调).catch(失败回调)——method 请求方式、url 请求路径、data 请求数据（POST 请求体）、params url 参数（?…&…）
7. 请求方式别名：axios.请求方式(url [, data [, config]])，推荐；axios.get(url[, config])、axios.delete、axios.head、axios.options 第二个参数是配置；axios.post(url[, data[, config]])、axios.put、axios.patch 第二个参数是数据
8. 响应结构：result 是响应对象（有 data / status / statusText / headers / config）；业务数据在 result.data；课程后端统一返回 {code, msg, data}，所以员工数组是 result.data.data
9. async / await：async 声明异步方法，await 等待异步任务成功的结果值并取代 .then()；await 只在 async 函数内有效；代码可读性强、便于维护；错误用 try...catch 捕获
10. 对接真实接口的四个核对点：① 跨域（协议/域名/端口任一不同，需要接口允许跨域，报 blocked by CORS policy）；② 地址/请求方式/参数名/参数位置和接口文档一致；③ 返回值的层数（先 console.log 看清楚）；④ 接口没起来时表现为 Network Error、404、405——页面空白 + 控制台报错

二、裸写题#

• 2-1 点按钮从服务器拿数据 页面上有一个”获取员工数据”按钮和一个输出区。要求：

  1. 点击按钮，向服务器发一次获取数据的请求（地址：https://web-server.itheima.net/emps/list）
  2. 把服务器返回的完整内容打印到控制台
  3. 把员工总共几个人显示到输出区（形如”共 4 人”）
  4. 请求失败时，把”加载失败”显示到输出区（不要让页面静默无反应） （练习文件 test_21_发送GET请求.html 里已经准备好了按钮、输出区和 Axios 引入。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：一次请求 = 地址 + “要数据”这个动作；结果要”先看清楚结构再取值”，因为返回的内容外面包了一层 二级 · 方法：axios.get(地址)；成功用 .then((result) => {...})，先 console.log(result.data) 看结构；员工数组在 result.data.data；人数用 .length；失败用 .catch((err) => {...}) 三级 · 骨架：axios.____('https://web-server.itheima.net/emps/list').____((result) => { console.log(result.____); document.querySelector('#out').innerText = \共 ${result.data.data.} 人`; }).((err) => { ……’加载失败’…… })`

  参考答案（做完再点开）

  1
  <button type="button" id="btn">获取员工数据</button>
  2
  <p id="out"></p>
  3
  
  4
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  5
  <script>
  6
    document.querySelector('#btn').addEventListener('click', () => {
  7
      axios.get('https://web-server.itheima.net/emps/list')
  8
        .then((result) => {
  9
          console.log(result.data);   // 控制台里看清楚：{code, msg, data:[...]}
  10
          // 员工数组在 result.data.data 里
  11
          document.querySelector('#out').innerText = `共 ${result.data.data.length} 人`;
  12
        })
  13
        .catch((err) => {
  14
          console.log(err);
  15
          document.querySelector('#out').innerText = '加载失败';
  16
        });
  17
    });
  18
  </script>

  显示更多显示更少

  检查点：① 点按钮后输出区显示”共 4 人”（当前接口里有 4 条数据）；② 控制台里能看到 {code: 1, msg: "success", data: Array(4)}；③ 故意把地址改错一个字母再点，页面显示”加载失败”、控制台里有 404 报错——这就是”接口没起来/地址写错”的表现。

• 2-2 用别名写法提交一次数据 页面上有一个”提交修改”按钮。要求：

  1. 点击按钮，用 Axios 的请求方式别名向 https://web-server.itheima.net/emps/update 提交一份数据（请求体内容就写 id=1）
  2. 打印服务器返回的结果到控制台
  3. 顺手再做一次：把”获取员工列表”这件事改成别名写法（地址 https://web-server.itheima.net/emps/list），并把返回的 msg 字段显示到页面上 （练习文件 test_21_请求方式别名.html 里已经准备好了按钮、输出区和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：别名就是”用方法名表示请求方式”；第二个参数的位置决定传进去的是”要提交的数据”还是”配置” 二级 · 方法：axios.post(地址, 数据)——提交的数据放在第二个参数；axios.get(地址) 拿数据；显示用 document.querySelector('#out').innerText = result.data.msg 三级 · 骨架：axios.____('https://web-server.itheima.net/emps/update', '____').then((result) => { console.log(result.____); }); / axios.____('https://web-server.itheima.net/emps/list').then((result) => { document.querySelector('#out').innerText = result.data.____; });

  参考答案（做完再点开）

  1
  <button type="button" id="btnPost">提交修改</button>
  2
  <button type="button" id="btnGet">获取列表</button>
  3
  <p id="out"></p>
  4
  
  5
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  6
  <script>
  7
    // 提交数据：别名 post，第二个参数就是请求体数据
  8
    document.querySelector('#btnPost').addEventListener('click', () => {
  9
      axios.post('https://web-server.itheima.net/emps/update', 'id=1').then((result) => {
  10
        console.log(result.data);   // {code: 1, msg: "success", data: null}
  11
      });
  12
    });
  13
  
  14
    // 获取数据：别名 get，把返回的 msg 显示到页面
  15
    document.querySelector('#btnGet').addEventListener('click', () => {
  16
      axios.get('https://web-server.itheima.net/emps/list').then((result) => {
  17
        document.querySelector('#out').innerText = result.data.msg;
  18
      });
  19
    });
  20
  </script>

  显示更多显示更少

  检查点：① 点”提交修改”控制台打印 msg: "success"；② 点”获取列表”页面显示 success；③ 能说出 axios.post(url, data) 里第二个参数为什么是数据——因为 POST 的”要提交的东西”是它的第一个业务参数（对比 axios.get(url, config) 的第二个参数是配置）。 对照课程 15. Axios-请求方式别名.html。课程里在那句 axios.get(...) 后面还写了一行 console.log('==========================')——它会先打印，这正是”异步”的证据，自己加进去验证一遍。

• 2-3 用 async / await 改写，并做错误处理 页面上有一个”查询”按钮和一个输出区。要求：

  1. 点按钮后请求 https://web-server.itheima.net/emps/list，把员工姓名拼成一句话显示到输出区（如”谢逊, 韦一笑, 黛绮丝, 殷天正”）
  2. 必须用 async / await 的写法（不许用 .then()）
  3. 加上错误处理：请求失败时输出区显示”数据加载失败，请检查网络或接口地址”，并把错误对象打印到控制台
  4. 在请求前后各打印一行日志，观察它们的执行顺序 （练习文件 test_21_async_await.html 里已经准备好了按钮、输出区和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：把”要等的异步任务”用 await 接住，结果就变成一个普通变量；出错的路用 try / catch 分成两段 二级 · 方法：函数前加 async；let result = await axios.get(地址)；数组 .map() 或用 for 拼姓名；try { … } catch (err) { … }；console.log 用来看顺序 三级 · 骨架：async function load() { try { console.log('开始'); let result = ____ axios.get('……/emps/list'); let names = result.data.data.map(e => e.____).join(', '); document.querySelector('#out').innerText = ____; console.log('结束'); } catch (____) { console.log(err); document.querySelector('#out').innerText = '数据加载失败，请检查网络或接口地址'; } }

  参考答案（做完再点开）

  1
  <button type="button" id="btn">查询</button>
  2
  <p id="out"></p>
  3
  
  4
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  5
  <script>
  6
    // async：声明这是一个异步方法，里面才能用 await
  7
    async function load() {
  8
      try {
  9
        console.log('① 开始请求');
  10
        // await：等请求成功的结果，取代 .then()
  11
        let result = await axios.get('https://web-server.itheima.net/emps/list');
  12
        // 把姓名数组拼成一句话
  13
        let names = result.data.data.map(e => e.name).join(', ');
  14
        document.querySelector('#out').innerText = names;
  15
        console.log('② 请求完成');
  16
      } catch (err) {
  17
        // 断网、地址写错、跨域被拦都会走到这里
  18
        console.log(err);
  19
        document.querySelector('#out').innerText = '数据加载失败，请检查网络或接口地址';
  20
      }
  21
    }
  22
  
  23
    document.querySelector('#btn').addEventListener('click', load);
  24
  </script>

  显示更多显示更少

  检查点：① 页面显示”谢逊, 韦一笑, 黛绮丝, 殷天正”（接口返回 4 条；条数可能变，以实际为准）；② 控制台顺序是”① 开始请求 → ② 请求完成”（多了 await，打印顺序和 .then() 那种写法不一样）；③ 把地址改错后点查询，页面显示失败提示、控制台有报错，页面没有卡死。

三、综合题#

• 3-1 做一个”接口小工具”页面（GET 查询 + POST 提交 + 状态提示） 页面上有三个区域：一个姓名输入框 + 查询按钮 + 清空按钮、一块结果区、一个”提交一条数据”按钮。要求（按步骤来）：

  1. 查询：用 async / await 向 https://web-server.itheima.net/emps/list 发 GET 请求，并把姓名输入框里的内容作为 name 参数拼到地址后面（?name=xxx）
  2. 渲染：把返回的员工数组渲染成一段列表（每行一条，显示”姓名 - 入职日期”），没有数据时显示”没有匹配的员工”
  3. 状态提示：请求开始前显示”加载中…”，成功后清空提示；失败时显示”加载失败：”+ 错误信息
  4. 清空：点清空把输入框内容擦掉、结果区恢复成初始提示”请输入姓名后点击查询”
  5. 提交：点”提交一条数据”用 POST 向 https://web-server.itheima.net/emps/update 提交 id=1，把返回的 msg 显示在结果区最后一行
  6. 全程用 try / catch 处理错误，并在控制台打印每次请求的完整响应（先看清楚结构再取数据） （练习文件 test_21_综合_接口小工具.html 里已经准备好了页面结构和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：把”发请求”包成一个函数，界面上的每个按钮只负责”改一下状态 + 调这个函数”；界面上所有文字都靠”改 DOM 内容”或”改元素内容”来更新 二级 · 方法：async function load() { try { … await axios.get(url) … } catch (err) { … } }；拼参数用模板字符串 `...?name=${name}`；渲染列表用 数组.map(item => \

  …

  `).join(”)再赋给innerHTML（[16 篇](/posts/编程学习/javaweb学习笔记/16-js-dom操作/)的套路）；POST 用 axios.post(url, data)；状态提示就是改某个元素的 innerText **三级 · 骨架**：async function load() { out.innerText = ''; try { let result = await axios.(`https://web-server.itheima.net/emps/list?name=${____}\`); let list = result.data.data; if (list.length == 0) { out.innerText = ‘没有匹配的员工’; } else { out.innerHTML = list.(e => `

  ${e.name} -${e.}

  `).join(”); } } catch (err) { out.innerText = ‘加载失败：’ + ____.message; } }`

  参考答案（做完再点开）

  1
  <input type="text" id="name" placeholder="请输入姓名">
  2
  <button type="button" id="btnSearch">查询</button>
  3
  <button type="button" id="btnClear">清空</button>
  4
  <button type="button" id="btnUpdate">提交一条数据</button>
  5
  
  6
  <div id="status"></div>
  7
  <ul id="list"></ul>
  8
  
  9
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  10
  <script>
  11
    let statusBox = document.querySelector('#status');
  12
    let listBox = document.querySelector('#list');
  13
  
  14
    // ① + ② + ③ 查询、渲染、状态提示
  15
    async function load() {
  16
      statusBox.innerText = '加载中…';   // 请求前：先给用户一个反馈
  17
      try {
  18
        let name = document.querySelector('#name').value;
  19
        let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${name}`);
  20
        console.log(result.data);        // 先看清楚结构：{code, msg, data}
  21
  
  22
        let emps = result.data.data;
  23
        if (emps.length == 0) {
  24
          statusBox.innerText = '没有匹配的员工';
  25
          listBox.innerHTML = '';
  26
        } else {
  27
          statusBox.innerText = `共 ${emps.length} 人`;   // 请求成功：提示换了内容
  28
          listBox.innerHTML = emps.map(e => `<li>${e.name} - ${e.entrydate}</li>`).join('');
  29
        }
  30
      } catch (err) {
  31
        console.log(err);
  32
        statusBox.innerText = '加载失败：' + err.message;
  33
      }
  34
    }
  35
  
  36
    // ④ 清空：输入框擦掉、结果区回到初始提示
  37
    function clear() {
  38
      document.querySelector('#name').value = '';
  39
      statusBox.innerText = '请输入姓名后点击查询';
  40
      listBox.innerHTML = '';
  41
    }
  42
  
  43
    // ⑤ 提交：POST，数据放在第二个参数
  44
    async function update() {
  45
      try {
  46
        let result = await axios.post('https://web-server.itheima.net/emps/update', 'id=1');
  47
        console.log(result.data);
  48
        statusBox.innerText = '提交结果：' + result.data.msg;
  49
      } catch (err) {
  50
        console.log(err);
  51
        statusBox.innerText = '提交失败：' + err.message;
  52
      }
  53
    }
  54
  
  55
    // 页面一打开就给个初始提示（还没学 Vue 的 mounted，这里直接手动调一次）
  56
    clear();
  57
  
  58
    document.querySelector('#btnSearch').addEventListener('click', load);
  59
    document.querySelector('#btnClear').addEventListener('click', clear);
  60
    document.querySelector('#btnUpdate').addEventListener('click', update);
  61
  </script>

  显示更多显示更少

  检查点：① 打开页面结果区显示”请输入姓名后点击查询”；② 姓名填”谢”再查询，列表出现匹配的员工行（参数没生效就会返回全部 4 条——可以对比一下）；③ 姓名填一个乱码（如 zzz）查询，显示”没有匹配的员工”；④ 点”提交一条数据”，结果区显示 提交结果：success；⑤ 拔网线/改成错的地址再点查询，显示”加载失败：…”而不是白屏。 说明：这个练习故意没用 Vue——把 16 篇的 DOM 操作和这一篇的 Axios 合起来练一遍。等下一章用 Vue 写同样的东西，你会发现”渲染列表”和”更新提示文字”都不用手动操作 DOM 了。