JS发送AJAX请求全攻略

本文深入解析了JavaScript中发送AJAX请求的两种主要方式：现代的Fetch API和传统的XMLHttpRequest对象。Fetch API基于Promise，语法简洁，支持async/await，更易于处理异步操作，并详细介绍了如何使用Fetch API发送GET/POST请求、自定义请求头以及处理HTTP错误。同时，文章也探讨了XMLHttpRequest在需要上传/下载进度、兼容老旧浏览器或同步请求等特定场景下的应用价值。此外，还分析了AJAX请求无响应的常见原因，包括网络问题、CORS、请求参数错误、代码逻辑以及服务器状态，并提供了实用的排查建议。最后，文章还介绍了如何使用AbortController实现Fetch API的超时控制，以及何时应选择XMLHttpRequest而非Fetch API，为开发者提供了全面的AJAX请求指南。

最现代且推荐的AJAX请求方式是使用fetch API，1. 它基于Promise，语法简洁，支持async/await，2. 可通过配置对象发送GET/POST请求并自定义请求头，3. 需手动检查response.ok处理HTTP错误，4. 使用AbortController结合Promise.race实现超时控制，5. 传统XMLHttpRequest适用于需上传/下载进度、兼容老旧浏览器或同步请求的场景。遇到请求无响应时，应检查网络、CORS、请求参数、代码逻辑及服务器状态。

在JavaScript中发送AJAX请求，最现代且推荐的方式是使用fetch API，它基于Promise，能更简洁地处理异步操作。当然，传统的XMLHttpRequest对象也依然可用，尤其在需要处理请求进度等特定场景时。

通过fetch API发送AJAX请求，其实比很多人想象的要直接。它返回一个Promise，让异步代码写起来更像同步。

最基本的GET请求是这样的：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { // 检查HTTP状态码，确保请求成功
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 或response.text()，根据服务器返回的数据类型
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

如果你需要发送POST请求，或者自定义请求头，fetch的第二个参数可以传入一个配置对象：

const postData = {
  name: '张三',
  age: 30
};

fetch('https://api.example.com/submit', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 告诉服务器发送的是JSON数据
    'Authorization': 'Bearer your_token_here' // 认证信息
  },
  body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('服务器响应:', data);
  })
  .catch(error => {
    console.error('POST请求失败:', error);
  });

使用async/await语法会让代码看起来更整洁，尤其在处理多个异步操作时：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('使用async/await获取到的数据:', data);
  } catch (error) {
    console.error('async/await请求失败:', error);
  }
}

fetchData();

而传统的XMLHttpRequest (XHR) 对象，虽然功能强大，但其API设计相对冗长：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 方法, URL, 是否异步
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('XHR获取到的数据:', JSON.parse(xhr.responseText));
  } else {
    console.error('XHR请求失败，状态码:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('XHR网络错误');
};
xhr.send(); // 发送请求

为什么我的AJAX请求没有响应？

遇到AJAX请求没有响应的情况，通常是挺让人抓狂的，毕竟它不像同步代码那样会直接报错在当前行。这里面涉及的因素很多，从网络层面到代码逻辑，甚至服务器配置，都可能成为“罪魁祸首”。

首先，最常见的是网络问题。浏览器控制台的“Network”标签页是你的第一站。看看请求有没有发出？状态码是什么？如果是pending状态，可能是网络延迟或者请求被阻塞了。如果显示错误码，比如404（Not Found）、500（Internal Server Error），那问题显然出在服务器或URL上。

另一个高频问题是跨域资源共享（CORS）。当你尝试从一个域（比如your-app.com）向另一个域（比如api.example.com）发送AJAX请求时，浏览器会出于安全考虑阻止它，除非服务器明确允许。你会看到控制台报CORS相关的错误，比如“No 'Access-Control-Allow-Origin' header is present on the requested resource”。这需要后端在响应头中添加Access-Control-Allow-Origin等字段来允许你的前端域访问。前端能做的，除了检查请求头是否正确外，就是确保请求方式（GET/POST等）和服务器的CORS配置是匹配的。有时，复杂的请求（如带有自定义头或PUT/DELETE方法）会触发“预检请求”（OPTIONS方法），如果预检请求失败，主请求就不会发出。

请求参数或格式不正确也是个坑。比如，你期望发送JSON数据，但忘记设置Content-Type: application/json头，或者body内容不是有效的JSON字符串，服务器可能就无法解析。同样，如果后端期望接收表单数据，而你发送了JSON，也会导致解析失败。

再者，JavaScript代码逻辑错误。可能是URL拼写错误，或者异步操作没有正确地用await或.then()链式处理，导致你在数据还没回来的时候就去访问它。特别是新手，容易忘记fetch返回的是Promise，不处理它的解析结果就去用，那当然是拿不到数据。

最后，服务器端问题。即便前端代码完美无瑕，如果后端服务宕机、接口地址变更、数据库连接失败或者业务逻辑出错，请求也自然不会有预期的响应。这时候，就需要和后端开发沟通，或者查看服务器日志来定位问题。

AJAX请求中如何处理错误和超时？

处理AJAX请求中的错误和超时，是构建健壮应用不可或缺的一部分。我们不能指望网络永远畅通，服务器永远稳定。

对于错误处理，fetch API的Promise特性让它变得相对直观。fetch本身只会在网络错误（如断网）或CORS问题时抛出错误，进入.catch()块。对于HTTP状态码（如404、500），fetch认为请求成功到达服务器，所以不会抛出错误，你需要手动检查response.ok属性（它等同于response.status >= 200 && response.status < 300）或者直接检查response.status。

fetch('https://api.example.com/non-existent-endpoint')
  .then(response => {
    if (!response.ok) {
      // HTTP状态码不在200-299范围内，手动抛出错误
      throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    // 捕获网络错误、CORS错误或上面手动抛出的HTTP错误
    console.error('请求过程中发生错误:', error.message);
    // 可以根据错误类型进行不同的处理，比如显示用户友好的提示
    if (error.message.includes('404')) {
      alert('请求的资源不存在！');
    } else {
      alert('网络或服务器异常，请稍后再试。');
    }
  });

使用async/await时，try...catch结构是处理错误的最佳实践：

async function safeFetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('请求失败:', error);
    // 可以在这里进行错误上报或用户提示
    throw error; // 重新抛出错误，让调用者也能处理
  }
}

// 调用示例
safeFetchData('https://api.example.com/data')
  .then(data => console.log('成功获取:', data))
  .catch(err => console.error('最终处理:', err.message));

至于超时处理，fetch API本身没有内置的超时选项，但可以通过AbortController和Promise.race来优雅地实现。AbortController允许你取消一个或多个fetch请求。

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout); // 设置一个定时器，超时后调用abort

  return fetch(url, {
    ...options,
    signal: controller.signal // 将AbortController的signal传递给fetch
  }).finally(() => clearTimeout(id)); // 无论成功失败，清除定时器
}

// 使用示例
fetchWithTimeout('https://api.example.com/slow-endpoint', {}, 3000) // 3秒超时
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('请求超时或被取消:', error);
      alert('请求超时，请检查网络或稍后再试。');
    } else {
      console.error('其他请求错误:', error);
    }
  });

这种方式提供了一种灵活的超时控制机制，让你的应用在网络状况不佳时也能提供更好的用户体验。

何时选择XMLHttpRequest而不是Fetch API？

尽管fetch API无疑是现代Web开发中发送AJAX请求的首选，因为它基于Promise，语法更简洁，并且设计上更符合现代异步编程范式，但在某些特定场景下，XMLHttpRequest (XHR) 仍然有其存在的价值，或者说，在某些方面它提供了fetch API目前不具备的直接能力。

最主要的一个理由是上传/下载进度事件。如果你需要为文件上传或下载显示精确的进度条，XMLHttpRequest提供了progress事件，你可以监听xhr.upload.onprogress来获取上传进度，或者xhr.onprogress来获取下载进度。fetch API在处理这类事件上就显得力不从心了，因为它返回的是一个Promise，并且对底层的数据流处理做了抽象，直接获取进度信息并不方便（虽然可以通过ReadableStream来间接实现，但复杂度更高）。

另一个考虑因素是取消请求的兼容性。虽然fetch现在有了AbortController来取消请求，但这是一个相对较新的API，在一些非常老旧的浏览器环境中可能不被支持。而XMLHttpRequest的abort()方法则拥有更广泛的浏览器兼容性。当然，对于大多数现代Web应用来说，这不再是一个主要问题，因为AbortController的兼容性已经相当不错，并且可以通过polyfill来进一步提升。

再者，是同步请求。虽然强烈不推荐在主线程中使用同步AJAX请求（因为它会阻塞UI，导致页面卡死），但在Web Workers中，或者极少数特殊场景下，你可能需要一个同步的请求。XMLHttpRequest支持通过将open()方法的第三个参数设置为false来实现同步请求，而fetch API则完全是异步的，不提供同步模式。

最后，可能是一些遗留代码或特定库的依赖。在维护老项目时，如果它们已经大量使用了XMLHttpRequest，并且没有明显的性能或功能瓶颈，那么继续沿用它可能比重构为fetch更划算。一些第三方库可能也基于XHR构建，直接使用它们的API比自己封装fetch更方便。

总的来说，对于绝大多数日常的API交互、数据获取和提交，fetch API都是更优的选择，因为它更符合JavaScript的异步特性，代码更具可读性和可维护性。只有当你明确需要XHR特有的功能（如精细的上传下载进度条）或者必须兼容非常老的浏览器环境时，才需要考虑XMLHttpRequest。

今天关于《JS发送AJAX请求全攻略》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！