Javascript·深入学习基础知识2

代码源码

// 更新订单跟踪截止日期
async function updateOrderDeadline(orderId, deadline) {
    const res = await fetch(`${API_BASE}/orders/${orderId}/deadline`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ followup_deadline: deadline })
    });
    if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || '更新失败');
    }
    return await res.json();
}

这段代码是标准的异步网络请求 封装，专门负责跟后端 API 打交道。它用到了现代 JavaScript 的 async/await 语法，让代码读起来像同步流程一样清晰。为了让你彻底理解，咱们还是把它拆解成几个步骤，顺便解释一下这里面的"黑话"。

---

⚙️ 函数定义与 async

// 更新订单跟踪截止日期
async function updateOrderDeadline(orderId, deadline) {

• async : 这个关键字放在函数前面，意思是"这个函数是异步的 "。它允许我们在函数内部使用 await（稍后解释）。这也意味着这个函数执行后，会返回一个 Promise（一个代表"未来结果"的承诺）。
• orderId: 订单的唯一编号（比如 "ORD-12345"），告诉服务器要改哪一个订单。
• deadline: 新的截止日期时间字符串。

---

🌐 发送网络请求 (fetch + await)

    const res = await fetch(`${API_BASE}/orders/${orderId}/deadline`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ followup_deadline: deadline })
    });

这是核心部分，分为两层：

1. fetch(...)

这是浏览器自带的"打电话"功能，用来请求服务器。它接收两个参数：

• URL 地址 : $ {API_BASE}/orders/ $ {orderId}/deadline
  • 这是一个模板字符串（用反引号 ` 包裹）。
  • ${orderId} 会把变量 orderId 的值直接塞进网址里。
  • 比如变成：/api/orders/1001/deadline。
• 配置对象 （大括号里的内容）:
  • method: 'PUT' : 告诉服务器我们要更新数据。（GET 是获取，POST 是新建，PUT 是更新）。
  • headers : 设置请求头。'Content-Type': 'application/json' 告诉服务器："我发给你的数据是 JSON 格式的"。
  • credentials: 'include' : 这个很重要。它告诉浏览器："发送请求时，带上用户的登录凭证（Cookie）"。如果没有这一行，服务器可能不知道是谁在发请求，从而拒绝访问。
  • body : 实际发送的数据。
    • JSON.stringify(...): 把 JavaScript 的对象 { followup_deadline: deadline } 转换成 JSON 字符串，因为网络传输只能传字符串。

2. await

• fetch 默认是异步的（发完请求就往下跑，不等结果）。
• 加上 await 后，代码会暂停 在这里，直到服务器返回结果，才把结果赋值给变量 res (response)。这让代码逻辑变得像写流水账一样简单。

---

🛡️ 错误处理

    if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || '更新失败');
    }

• res.ok : 这是一个布尔值。如果服务器返回的状态码是 200 系列 （比如 200 OK, 201 Created），它就是 true。如果是 400 (错误请求) 或 500 (服务器崩溃)，它就是 false。
• !res.ok : 意思是"如果不成功"。
• await res.json(): 把服务器返回的错误信息（通常是 JSON 格式）解析出来。
• throw new Error(...) : 手动抛出一个错误。这会立即停止函数执行，并把控制权交给调用它的地方的 .catch() 代码块。
  • data.message || '更新失败': 如果服务器返回了具体的错误消息（比如"日期格式不对"），就用那个消息；否则显示默认的"更新失败"。

---

📦 返回结果

    return await res.json();
}

• 如果上面没有报错（也就是 res.ok 是 true），代码会运行到这里。
• return await res.json() : 把服务器返回的成功数据解析成 JavaScript 对象，并返回给调用者。
  • 这样，在上一段代码 saveDeadlineFromInput 中，updateOrderDeadline(...) 就能拿到服务器确认更新后的最新数据。

---

📌 总结：这段代码在做什么？

想象你是一个采购员：

1. async function: 你领到了一个任务："去更新截止日期"。
2. await fetch(...) : 你拿着订单号（orderId）和新日期，跑到经理办公室（服务器）。你在门口等着 （await），直到经理处理完。
3. method: 'PUT' : 你告诉经理："我是来修改信息的，不是来新建的"。
4. credentials: 'include' : 你进门时出示了你的工牌（Cookie），证明你是公司员工。
5. if (!res.ok) : 经理看了一眼。如果经理皱眉（报错，比如工牌过期），你就拿着经理给的拒绝理由（data.message），跑回去告诉老板"出错了！"（throw new Error）。
6. return await res.json() : 如果经理点头说"改好了"，你就拿着经理签字的确认单（返回的数据），跑回去交给你的老板（saveDeadlineFromInput 函数）。