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,
  };
});
相关推荐
console.log('npc')1 分钟前
前端性能优化,给录音播放的列表加个播放按键,点击之后再播放录音。减少页面的渲染录音文件数量过多导致加载缓慢
前端·javascript·vue.js·算法
江城开朗的豌豆22 分钟前
React-Redux性能优化:告别"数据一变就刷屏"的烦恼!
前端·javascript·react.js
努力往上爬de蜗牛29 分钟前
文件下载 针对安卓系统
前端·javascript·vue.js
一粒马豆30 分钟前
excel表格通过前端fetch上传至后端flask处理流程示例
前端·python·flask·excel·h5·js·fetch
江城开朗的豌豆37 分钟前
前端异步难题?用Redux-Thunk轻松搞定!
前端·javascript·react.js
CodeSheep42 分钟前
稚晖君公司最新合伙人,公开了!
前端·后端·程序员
IT_陈寒1 小时前
3年Java老手:我用这5个Spring Boot优化技巧将系统吞吐量提升了200%!🚀
前端·人工智能·后端
清木Moyu1 小时前
layui tree组件回显bug问题,父级元素选中导致子集全部选中
前端·bug·layui
奶糖 肥晨2 小时前
前端Bug实录:为什么表格筛选条件在刷新时神秘消失?
前端·bug
樱花落海洋1112 小时前
layui 表格行级 upload 上传操作
前端·javascript·layui