原生js发送请求

原生JavaScript发送请求主要涉及到XMLHttpRequest对象（XHR）和Fetch API两种方式。

XMLHttpRequest对象

XMLHttpRequest是较早的发送HTTP请求的方式。以下是一个使用XMLHttpRequest发送GET请求的基本示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Fetch API

Fetch API是一个现代、强大且灵活的网络API，它基于Promise设计，使得异步处理更加简洁。以下是一个使用Fetch API发送GET请求的基本示例：

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

优势：

1. XMLHttpRequest：兼容性好，可以在老版本的浏览器中使用。
2. Fetch API：语法简洁，基于Promise，易于进行链式调用和错误处理；支持流式传输，可以逐步接收响应数据；提供了更丰富的响应类型和请求选项。

应用场景：

• 当需要兼容老版本浏览器时，可以使用XMLHttpRequest。
• 当需要更简洁的语法和更强大的功能时，推荐使用Fetch API。

可能遇到的问题及解决方法：

1. 跨域问题：如果请求的资源与当前页面不在同一个域，可能会遇到跨域问题。解决方法包括在服务器端设置CORS（跨域资源共享）头部，或者使用JSONP等方式。
2. 网络错误：网络不稳定或服务器错误可能导致请求失败。可以通过检查response.status和捕获异常来处理这些错误。
3. 数据格式问题：如果服务器返回的数据格式与预期不符，可能会导致解析错误。可以通过检查response.headers.get('Content-Type')来确定数据类型，并相应地处理数据。

总之，原生JavaScript提供了多种发送请求的方式，可以根据具体需求和场景选择合适的方法。