使用 JS 获取请求

在 web 开发中，我们经常需要使用 JavaScript 来发送请求并获取数据。这个过程也称为 AJAX（Asynchronous JavaScript and XML）。

发送 GET 请求

发送 GET 请求是最简单的。

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

以上代码使用了 fetch API。这个 API 是浏览器内置的，其作用是发送网络请求，并返回 Promise 对象。在 Promise 对象中，我们可以使用 then 方法来处理请求成功后的结果和 catch 方法来处理请求失败的情况。

获取响应

在请求成功后，我们可以使用 response 对象来获取响应的内容。

fetch('https://example.com/data.json')
  .then(response => {
    console.log(response.status); // 状态码
    console.log(response.statusText); // 状态信息
    console.log(response.headers.get('content-type')); // 响应头
    return response.json(); // 响应体（解析为 JSON）
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

以上代码中，我们通过 response.status 来获取 HTTP 状态码，通过 response.statusText 来获取状态信息，通过 response.headers 来获取响应头信息，通过 response.json() 方法来解析响应体为 JSON 格式。

发送 POST 请求

发送 POST 请求需要在请求中添加一些额外的信息。

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在以上代码中，我们设置了请求方法为 POST，请求头中包含了 Content-Type: application/json，请求体中包含了一个 JSON 对象。

其他请求类型

除了 GET 和 POST 请求，还有 PUT、DELETE 等请求类型。在发送这些请求时，我们只需要修改 fetch 方法的第二个参数即可。

fetch('https://example.com/api/data/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Bob', age: 25 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

总结

使用 JavaScript 发送请求和获取响应是前端开发中必不可少的一环。我们可以使用 fetch API 来发送各种类型的请求，并获取相应的数据。在处理响应时，我们可以结合 Promise 对象和各种方法来获取 HTTP 状态码、状态信息、响应头和响应体。