JavaScript的fetch使用(二)：请求参数

2023-09-22 22:05:58

探索 JavaScript Fetch 方法的请求参数

查询字符串

想象一下一个购物网站，你正在搜索特定的产品。当你输入搜索词并按回车键时，你的浏览器会将搜索词作为查询字符串附加到 URL。查询字符串允许你向服务器发送额外信息，例如过滤器或查询。例如：

https://example.com/products?q=JavaScript

在这个例子中，查询字符串 q=JavaScript 指示服务器查找与“JavaScript”相关的产品。

请求头

请求头就像 HTTP 请求中的特殊信息包。它们包含有关请求的详细信息，例如请求的类型（例如 GET 或 POST）、请求的资源以及你浏览器的类型。你可以通过 fetch 的 headers 选项指定请求头。

fetch('https://example.com/api/v1/users', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  }
});

跨域请求

当你在一个网站上向另一个网站发送请求时，就会发生跨域请求。然而，由于安全原因，浏览器通常会阻止跨域请求。为了允许跨域请求，你可以使用 CORS（跨域资源共享）。CORS 是一种机制，允许服务器指定哪些网站可以访问其资源。

发送 JSON 数据

JSON（JavaScript 对象表示法）是一种流行的数据格式，用于在互联网上传输数据。fetch 可以用来发送 JSON 数据。只需使用 JSON.stringify() 方法将 JSON 对象转换为字符串，然后将其作为请求体发送给服务器。

fetch('https://example.com/api/v1/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  })
});

发送 FormData 数据

FormData 是一个用于收集表单数据的对象。fetch 可以用来发送 FormData 数据。只需创建一个 FormData 对象，添加表单字段，然后将其作为请求体发送给服务器。

const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'john.doe@example.com');

fetch('https://example.com/api/v1/users', {
  method: 'POST',
  body: formData
});

结论

通过探索 JavaScript Fetch 方法的这些请求参数，你可以灵活地向服务器发送数据、指定请求类型并控制跨域请求。掌握这些概念将极大地提升你构建强大且交互式 web 应用程序的能力。

常见问题解答