Fetch 语法

Fetch('服务器地址',请求参数对象)

请求参数对象:

可以有以下键值对:

• mode: 以下值
  • same-origin
    • 严格遵守同源策略, 发送的跨域请求和响应都会被浏览器拦截
  • no-cors
    • 可以发送跨域请求给服务器, 但响应数据为空
      • 不会报错
  • cors
    • 可以发送跨域请求给服务器, 响应被浏览器拦截
      • 会报错

实例

读取json文件

function Func() { 
    fetch("./sample.json") 
        .then((res) => { 
        return res.json(); 
    }) 
    .then((data) => console.log(data)); 
}

发送不同请求体类型的post请求

POST 请求的四种传参方式

下面介绍客户端发送 POST 请求 时的四种传参方式。请注意，这里主要讨论原始的数据格式交互，具体使用 Ajax 库 的方式可能会有所不同。

1. JSON 提交

• 请求头（Request Headers）的实体 Content-Type 用于指示资源的 MIME 类型，即客户端传递消息的格式。
• 使用 JSON 传递参数时，请求头的 Content-Type 为 application/json;charset=utf-8。 客户端示例代码： JavaScript

const url = "http://example.com/test";
const data = { a: 1 };
let testRequest = new Request(url, {
  method: "post",
  headers: {
    "Content-Type": "application/json;charset=utf-8",
  },
  body: JSON.stringify(data),
});
fetch(testRequest)
  .then((response) => response.text())
  .then((res) => {
    console.log(res);
  });

AI 生成的代码。仔细查看和使用。 . 服务端示例代码（Node.js）： JavaScript

router.post("/test", (req, res, next) => {
  // 接收请求参数
  const params = req.body;
  console.log(params);
  // ...
});

AI 生成的代码。仔细查看和使用。 .

2. 表单提交

• 使用 application/x-www-form-urlencoded 格式传递参数。
• 请求头的 Content-Type 为 application/x-www-form-urlencoded。

3. FormData 提交

• 使用 FormData 对象传递参数，适用于上传文件等场景。
• 请求头的 Content-Type 为 multipart/form-data。

4. 自定义请求体

• 自定义请求体，例如直接传递字符串或二进制数据。
• 请求头的 Content-Type 根据实际情况设置。