fetch

1️⃣ fetch 是什么?

fetch 是浏览器自带的一个方法,用来发 HTTP 请求

它的最大特点是:异步 (不会卡死页面)+ 基于 Promise (可以配合 await 很方便)。

2️⃣ 最简单的用法

假设我们有一个接口:

arduino 复制代码
https://api.example.com/data

我们想获取它的数据,最基础的写法:

js 复制代码
fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("出错了", err));

3️⃣ 配合 async/await

await 会更直观:

js 复制代码
async function getData() {
  try {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("出错了", err);
  }
}

📌 两次 await 的意义:

  1. 第一次 await 等的是"请求完成,拿到 HTTP 响应"(Response 对象)。
  2. 第二次 await 等的是"把响应体解析成 JSON"。

4️⃣ fetch 的几个重要点

(1)fetch 默认是 GET 请求

scss 复制代码
fetch("/api/user")

这就相当于:

sql 复制代码
fetch("/api/user", { method: "GET" })

(2)发送 POST 请求

css 复制代码
fetch("/api/user", {
  method: "POST",
  headers: {
    "Content-Type": "application/json" // 告诉服务器我发的是 JSON
  },
  body: JSON.stringify({ name: "张三", age: 18 }) // 请求体
})

(3)检查请求是否成功

fetch 不会因为 404 / 500 直接报错,它只会在网络错误 时(比如断网)才进 catch

所以要自己判断:

javascript 复制代码
const res = await fetch(url);
if (!res.ok) {
  throw new Error(`请求失败:${res.status}`);
}

res.ok 会在状态码 200~299 时返回 true

蓝桥杯真题

题目:www.lanqiao.cn/problems/18...

js 复制代码
export const useMessageStore = defineStore("message", () => {
  const messageState = ref([]);
  // 定义请求地址 MockUrl
  const MockUrl = "./data.json";
  let getUserMessage = async () => {
    // TODO:待补充代码
    try {
      const res = await fetch(MockUrl);
      if (!res.ok) {
        throw new Error(`请求失败:${res.status}`);
      }
      const data = await res.json();
      messageState.value = data;
      console.log("数据加载成功:", data);
    } catch (err) {
      console.error("获取数据出错:", err);
    }
    // TODO:END
  };

  return {
    messageState,
    getUserMessage,
  };
});
相关推荐
网络研究院18 小时前
苹果 Safari 地址栏可能被超大光标视觉欺骗
前端·safari·苹果
slongzhang_19 小时前
html添加水印
前端·html
Small black human19 小时前
前端-什么是Vue
前端·javascript·vue.js
IT 前端 张20 小时前
Axios与Ajax:现代Web请求大比拼
前端·javascript·ajax
ikun778g21 小时前
uniapp使用uview UI,自定义级联选择组件
前端·前端框架·uni-app
java水泥工21 小时前
基于Echarts+HTML5可视化数据大屏展示-惠民服务平台
前端·echarts·html5
万少1 天前
可可图片编辑 HarmonyOS(3)应用间分享图片
前端·harmonyos·客户端
Hy行者勇哥1 天前
现代软件系统架构:前端、后端、数据库、部署、算法与AI学习的结构与交互分析
前端·数据库·学习
前端开发爱好者1 天前
90% 前端都不知道的 20 个「零依赖」浏览器原生能力!
前端·javascript·vue.js
讨厌吃蛋黄酥1 天前
React语法全景指南:面试官问我用了哪些语法时,我这样回答拿到了offer
前端·react.js·面试