如何检查 ajax 响应中是否收到 json 数据 - Javascript

在进行 AJAX 请求时，我们经常需要检查是否成功接收并处理了 JSON 格式的响应数据。这里提供一些在 Javascript 中检查 AJAX 响应中 JSON 数据的方法。

1. 使用 XMLHttpRequest 对象

在 AJAX 请求中，我们使用 XMLHttpRequest 对象来发送请求和处理响应数据。我们可以使用 readyState 属性来检查响应的状态，使用 status 属性来检查 HTTP 响应状态码。为了确保我们收到的是 JSON 格式的响应数据，我们还需要检查响应类型 (responseType) 是否设置为 "json"。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'url_to_json_data');

xhr.onload = function() {
  if (this.readyState === 4 && this.status === 200) {
    const responseData = this.response;
    
    // 检查响应类型
    if (this.getResponseHeader('content-type').indexOf('application/json') !== -1) {
      console.log(responseData);
    } else {
      console.log('响应类型不是 JSON');
    }
  }
};

xhr.responseType = 'json';
xhr.send();

2. 使用 Fetch

Fetch 是 ES6 中引入的新的 AJAX API。相比 XMLHttpRequest，它更加简单、易用，且支持 Promise。在 Fetch 中，我们可以使用 response.json() 方法来将响应数据转为 JSON 对象。

fetch('url_to_json_data')
  .then(response => {
    // 检查响应类型
    if (response.headers.get('content-type').indexOf('application/json') !== -1) {
      return response.json();
    } else {
      throw new TypeError('响应类型不是 JSON');
    }
  })
  .then(json => {
    console.log(json);
  })
  .catch(error => {
    console.error(error);
  });

3. 使用 axios

axios 是一款基于 Promise 的 HTTP 库，也是一个相对比较流行的 AJAX 库。在 axios 中，我们可以使用 response.data 来获取响应数据。

axios.get('url_to_json_data')
  .then(response => {
    // 检查响应类型
    if (response.headers['content-type'].indexOf('application/json') !== -1) {
      console.log(response.data);
    } else {
      console.log('响应类型不是 JSON');
    }
  })
  .catch(error => {
    console.error(error);
  });

这里给出了三种方法来检查 AJAX 响应中的 JSON 数据。以上方法都可以根据实际场景选择使用。