Fetch发送请求

fetch 是 javascript 中一个新的 api,用于访问和控制 HTTP 的请求和响应等,不再需要使用传统的 XMLHttoRequest

fetch和ajax的不同

fetch 发送请求后,返回一个 promise,只有在网络无法连接或者请求被阻止的时候,会返回 reject,其他情况下,fetch不会对状态码进行判断,统一返回 resolve,需要在响应数据中手动判断状态码来确定响应是否可用。

fetch 默认不会发送跨域cookies,可以在credentials选项中进行配置。

fetch使用

下面的代码展示最简单的 fetch 使用,在 fetch() 中填入一个请求路径,会得到一个响应,解析响应得到最终的数据,这里使用 json() 来解析 json 数据。

fetch("http://example.com/movies.json") // 发起请求
  .then((response) => response.json())  // 解析响应数据
  .then((data) => console.log(data));   // 打印数据

请求参数配置

fetch() 除了请求路径之外,还可以传入第二个参数,该参数类型是一个对象,可以用来控制本次请求的配置

const response = await fetch('https://example.com/answer', {
    method: "POST", 
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data), 
});

cosnt json = response.json(); 

console.log(json);

上面的代码中,在配置项中设置了本次请求的方法是 POST,还指定了本次传输的数据类型是 json 格式,通过 body 写入需要传输的数据。

发布时间:2025-04-15
其他阅读

Angular使用路由复用实现单页多窗(Tab)

我们在开发后台管理系统时,一个很重要的需求就是多窗口编辑,来回切换使用。一种思路是使用iframe来记录多个多页面展示,本文通过Angular路由复用来实现这一需求。

查看原文

Js文件上传

文件上传是一个前端比较常见的功能,无论是以前的MVC客户端,还是现代化SPA客户端中,但万变不离其宗,其内核基本不变,本文就此讨论简单文件上传(以图片为例子)。

查看原文

使用Cherry Studio搭配DeepSeek构建知识库

上篇文章,介绍了怎么在本地部署DeepSeek大模型服务,但是仅限于对话聊天,本文在之前的基础上,用DeepSeek搭配上Cherry Studio来构建个人知识库。

查看原文

电脑版微信支持抢红包和发朋友圈了

微信迎来史诗级加强——支持抢红包,微信迎来史诗级加强——支持发布朋友圈。

查看原文

C#本质论7.0

《C#本质论》是C#最权威、最值得尊重的参考书之一,作者为此付出了非凡的努力!Mark Michaelis的《Essential C#》系列多年来一直是畅销经典。

查看原文