四时宝库

我刚学习编程的时候，js请求用的是XMLHttpRequest，那时候就XMLHttpRequest都不是统一的分IE，火狐，后来出现个webkit，大家都不统一，刚开始我们只能去一个一个判断浏览器类型。直到有一天jQuery神器诞生解决了浏览器兼容的问题，额，扯远了。

过去我们jsHTTP请求用的是ajax就是我刚说的XMLHttpRequest，随着浏览器的升级和统一标准fetch出现了。下面我们看看如何使用。

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

看看是不是很简单，因为返回的都是Promise对象，所以会有then和catch，默认是异步请求。我们也可以把它同步化，这里用到 async/await，当然必要浏览器支持2023年了大多浏览器都应该支持了吧。

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchUserData();

fetch和json这两个返回的都是Promise，所以都要用await同步返回数据。

我们再看看POST

const data = {
  "name": "sam",
  "age": 30,
}
fetch('example.com/api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(...)
.catch(...)

以上是个例子框架，不是完整的代码。fetch函数的第二个参数就是来定义请求的类型和其他参数，这点和ajax一样。如果你以前是用jQuery来做ajax请求，很容易改成fetch请求。

Fetch 函数有两个参数：URL 和 options（可选参数）。

可以将 URL 自己写成绝对路径，也可以使用相对路径，但是这些路径必须指向一个存在的资源。options 参数包含一些请求的配置，包括 header、mode、method、body 等。

下面是 fetch() 函数中 options 参数的一些常用选项：

method: 请求的 HTTP 方法，如 GET、POST、PUT、DELETE，等，默认值为 GET。

headers: 请求头信息，常用的请求头信息有 "Content-Type", "Origin", "Authorization", "Cache-Control" 等。