JS发送请求|极客笔记

JS发送请求

在前端开发中，经常会涉及到与后端服务器进行数据交互的情况，这就需要使用JavaScript来发送请求。在本文中，我们将详细讨论如何使用原生的JavaScript来发送不同类型的请求，包括GET请求、POST请求等，并对一些常用的技术进行介绍。

发送GET请求

GET请求是最常用的一种请求方式，用于从服务器获取数据。在JavaScript中，我们可以使用XMLHttpRequest对象来发送GET请求。下面是一个简单的示例：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求方式和请求地址
xhr.open('GET', 'https://api.example.com/data', true);

// 发送请求
xhr.send();

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  } else {
    // 请求失败
    console.error('Request failed');
  }
};

在上面的代码中，我们首先创建了一个XMLHttpRequest对象，然后使用open方法配置了请求方式为GET，并指定了请求的URL地址。接着我们发送了请求，并通过监听onreadystatechange事件来获取请求的状态和数据。当readyState为4且status为200时，表示请求成功，我们可以通过responseText来获取服务器返回的数据。

发送POST请求

除了GET请求外，POST请求也是常用的请求方式，用于向服务器提交数据。同样使用XMLHttpRequest对象来发送POST请求，代码如下：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求方式和请求地址
xhr.open('POST', 'https://api.example.com/saveData', true);
xhr.setRequestHeader('Content-Type', 'application/json');

// 准备要发送的数据
var data = {
  username: 'john',
  email: 'john@example.com'
};
var jsonData = JSON.stringify(data);

// 发送请求
xhr.send(jsonData);

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  } else {
    // 请求失败
    console.error('Request failed');
  }
};

在上面的代码中，我们同样创建了一个XMLHttpRequest对象，并使用open方法配置了请求方式为POST，并设置了请求的URL地址。通过setRequestHeader方法来设置请求头的Content-Type为application/json，表示我们要发送JSON格式的数据。然后我们将要发送的数据转换为JSON字符串，并通过send方法发送出去。

使用Fetch API发送请求

除了XMLHttpRequest对象，现代浏览器还支持使用Fetch API发送请求，它提供了更简洁和方便的方式来处理网络请求。下面是一个使用Fetch API发送GET请求的示例：

fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Request failed');
    }
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的代码中，我们使用fetch方法发送了一个GET请求，并通过then方法来处理服务器返回的数据。如果请求成功，则调用json方法将响应转换为JSON格式的数据，并输出到控制台。如果请求失败，则会抛出一个错误。

使用Axios发送请求

另外一个常用的发送请求的方式是使用Axios库，它是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境。以下是一个使用Axios发送POST请求的示例：

axios.post('https://api.example.com/saveData', {
    username: 'john',
    email: 'john@example.com'
  })
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的代码中，我们使用axios.post方法发送了一个POST请求，并传递了要发送的数据。通过then方法来处理服务器返回的数据，如果请求成功则输出到控制台，如果请求失败则输出错误信息。