正文

揭秘原生JS轻松搞定接口请求，告别繁琐，掌握高效技巧！

/0 浏览量
0329

在Web开发中，与服务器进行数据交互是不可或缺的一部分。原生JavaScript提供了多种方式来处理HTTP请求，从而实现与服务器端的接口通信。本文将详细介绍如何使用原生JS轻松搞定接口请求，帮助开发者告别繁琐，掌握高效技巧。

一、传统方式：使用XMLHttpRequest

在原生JavaScript中，XMLHttpRequest（简称XHR）是最传统的接口请求方式。它允许你向服务器发送请求并获取响应，而不需要刷新页面。

1.1 创建XHR对象

var xhr = new XMLHttpRequest();

1.2 配置XHR对象

xhr.open('GET', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

1.3 设置回调函数处理响应

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

1.4 发送请求

xhr.send();

二、现代方式：使用fetch API

fetch API是现代浏览器提供的一种更简单、更强大、更灵活的接口请求方式。它基于Promise，使得异步操作更加直观。

2.1 使用fetch API发送请求

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

2.2 配置请求头

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

三、跨域请求处理

在实际开发中，跨域请求是一个常见问题。以下是一些处理跨域请求的方法：

3.1 JSONP

JSONP是一种较老的技术，可以通过在请求中添加一个回调函数参数来绕过同源策略。

function handleResponse(data) {
  console.log(data);
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);

3.2 CORS

CORS（跨源资源共享）是一种更现代的方法，允许服务器明确指定哪些域名可以访问其资源。

在服务器端，你需要在响应头中添加Access-Control-Allow-Origin字段：

res.header('Access-Control-Allow-Origin', 'https://yourdomain.com');

四、总结

使用原生JavaScript处理接口请求，虽然不如一些库和框架那样方便，但仍然是一种非常实用的技能。通过本文的介绍，相信你已经掌握了原生JS轻松搞定接口请求的方法。在实际开发中，灵活运用这些技巧，可以让你更加高效地与服务器进行数据交互。

-- 展开阅读全文 --