Javascript获取响应负载

在前端开发中，我们经常需要获取后台接口的响应负载进行处理。本篇文章将介绍如何使用Javascript获取响应负载。

发送请求

在获取响应负载之前，我们需要先发送一个请求。我们可以使用XMLHttpRequest对象来发送请求，也可以使用fetch API来发送请求。

XMLHttpRequest

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 指定请求方法和URL
xhr.open('GET', 'http://example.com/api');
// 发送请求
xhr.send();

fetch

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

获取响应负载

XMLHttpRequest

当接收到响应后，我们可以使用XMLHttpRequest对象的responseText和responseXML属性来获取响应负载。

xhr.addEventListener('load', () => {
  console.log(xhr.responseText);
});

如果响应的是XML格式的数据，可以使用responseXML属性来获取响应负载。

xhr.addEventListener('load', () => {
  console.log(xhr.responseXML);
});

fetch

使用fetch发送请求时，我们可以通过Response对象的text()、json()和blob()方法来获取响应负载。

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

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

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

以上代码将分别获取响应负载的文本、JSON格式和二进制格式。

注意事项

在使用XMLHttpRequest对象发送请求时，我们需要注意跨域访问的问题，需要设置合适的请求头来解决跨域问题。如果使用的是fetch API，可以设置mode属性来解决跨域问题。

fetch('http://example.com/api', { mode: 'cors' })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

结论

本篇文章介绍了如何使用Javascript获取响应负载。我们可以使用XMLHttpRequest对象来发送请求，并使用responseText和responseXML属性来获取响应负载，也可以使用fetch API发送请求，通过Response对象的方法来获取响应负载。我们在使用XMLHttpRequest对象发送请求时要注意跨域访问的问题，需要设置合适的请求头来解决跨域问题。