如何在JavaScript中执行HTTP请求？

HTTP协议是Web上数据通信的基础。它是一种请求-响应协议，意味着客户端发送请求到服务器，服务器返回响应给客户端。

最常见的HTTP方法是GET、POST、PUT和DELETE。通过JavaScript发送请求非常常见，可以使用更现代的fetch API或较旧的XMLHttpRequest Web API来实现。

使用Fetch API

Fetch API是XMLHttpRequest的现代替代品。它是一个基于Promise的API，允许您像XMLHttpRequest一样进行网络请求，但具有更简单和更强大的接口。

HTTP GET请求

最简单的用例是向给定的URL发出GET请求。由于fetch() API返回一个Promise，您可以使用then方法处理响应。在下面的示例中，响应使用json()方法转换为JSON，然后记录到控制台。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

/* 输出: {
  'userId': 1,
  'id': 1,
  'title': 'sunt aut facere repellat provident occaecati…',
  'body': '…'
} */

HTTP POST请求

要进行POST请求，您需要将请求选项的对象作为fetch()的第二个参数传递。method选项设置为'POST'，body选项设置为要发送的数据。

body选项中的数据类型可能会有所不同，并且应根据Content-type头进行编码。在下面的示例中，数据被编码为JSON，使用JSON.stringify，并且Content-type头设置为'application/json; charset=UTF-8'。

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

/* 输出: {
  'title': 'foo',
  'body': 'bar',
  'userId': 1,
  'id': 101
} */

HTTP PUT请求

与POST请求类似，您可以通过在请求选项对象中将method选项设置为'PUT'来进行PUT请求。其余的请求选项与POST请求相同。

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

/* 输出: {
  'id': 1,
  'title': 'foo',
  'body': 'bar',
  'userId': 1
} */

HTTP DELETE请求

要进行DELETE请求，您需要在请求选项对象中将method选项设置为'DELETE'。DELETE请求没有请求体，因此在下面的示例中省略了body选项。

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

/* Logs: {
  'title': 'foo',
  'body': 'bar',
  'userId': 1,
  'id': 101
} */

使用XMLHttpRequest

XMLHttpRequest是JavaScript中进行HTTP请求的旧方法。它不如fetch API强大，但仍然被广泛使用，并且在所有现代浏览器中都得到支持。

XMLHttpRequest使用事件监听器来处理响应和错误，而不是使用Promise。onload事件用于处理响应，onerror事件用于处理错误。

发送HTTP GET请求

以下示例使用XMLHttpRequest web API向给定的URL发送GET请求。当请求成功时，调用给定的callback函数并传递responseText，当发生错误时调用err函数。

const httpGet = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send();
};

httpGet(
  'https://jsonplaceholder.typicode.com/posts/1',
  console.log
);
/* Logs: {
  'userId': 1,
  'id': 1,
  'title': 'sunt aut facere repellat provident occaecati…',
  'body': '…'
} */

发送HTTP POST请求

以下示例使用XMLHttpRequest Web API向给定的URL发出POST请求。data参数是要发送的数据，callback函数在请求成功时被调用，并传入responseText。为了设置Content-type头部，你需要使用setRequestHeader方法。

const httpPost = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request.responseText);
  request.onerror = () => err(request);
  request.send(data);
};

httpPost(
  'https://jsonplaceholder.typicode.com/posts',
  JSON.stringify({
    userId: 1,
    id: 1337,
    title: 'Foo',
    body: 'bar bar bar'
  }),
  console.log
);
/* 输出: {
  'title': 'foo',
  'body': 'bar',
  'userId': 1,
  'id': 101
} */

HTTP PUT请求

以下示例使用XMLHttpRequest Web API向给定的URL发出PUT请求。data参数是要发送的数据，callback函数在请求成功时被调用，并传入responseText。

const httpPut = (url, data, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('PUT', url, true);
  request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
  request.onload = () => callback(request);
  request.onerror = () => err(request);
  request.send(data);
};

httpPut(
  'https://jsonplaceholder.typicode.com/posts/1',
  JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  request => console.log(request.responseText)
);
/* 输出: {
  'id': 1,
  'title': 'foo',
  'body': 'bar',
  'userId': 1
} */

HTTP DELETE请求

以下示例使用XMLHttpRequest Web API向给定的URL发出DELETE请求。callback函数在请求成功时被调用，并传入responseText。

const httpDelete = (url, callback, err = console.error) => {
  const request = new XMLHttpRequest();
  request.open('DELETE', url, true);
  request.onload = () => callback(request);
  request.onerror = () => err(request);
  request.send();
};

httpDelete('https://jsonplaceholder.typicode.com/posts/1', request => {
  console.log(request.responseText);
});
/* 输出: {} */