JS发送GET请求|极客笔记

JS发送GET请求

在前端开发中，经常会涉及到与服务器进行数据交互的需求，其中发送GET请求是最常见的一种方式。GET请求通常用于从服务器获取数据，它是一种无副作用的请求，也就是说它不会对服务器上的数据做出任何更改。

如何使用JS发送GET请求

要发送GET请求，我们可以使用XMLHttpRequest对象或fetch API。下面分别介绍两种方式的用法。

使用XMLHttpRequest发送GET请求

XMLHttpRequest对象是一个内置的浏览器对象，用于在不刷新页面的情况下与服务器进行交互。我们可以通过创建一个XMLHttpRequest对象来发送GET请求。

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

// 指定请求的方式、URL和是否异步
xhr.open('GET', 'https://api.example.com/data', true);

// 注册事件监听器，监听请求的状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 请求成功
      console.log(xhr.responseText);
    } else {
      // 请求失败
      console.error('请求失败');
    }
  }
};

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

在上面的代码中，我们首先创建了一个XMLHttpRequest对象，并使用open方法指定了请求的方式（GET）、URL和是否异步。然后通过readystatechange事件监听器来监听请求的状态变化，在请求完成后可根据状态码判断请求的结果。

使用fetch API发送GET请求

fetch API是现代浏览器中提供的用于网络请求的新接口，它是基于Promise的，使用起来更加方便和灵活。下面是使用fetch API发送GET请求的示例代码。

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('请求失败');
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们使用fetch函数发送GET请求，并使用then方法处理请求的结果。如果请求成功，我们将返回的响应转换为JSON格式，并打印出来；如果请求失败，则捕获错误并打印错误信息。

GET请求的参数传递

在发送GET请求时，通常会需要传递一些参数给服务器，以便服务器能够正确地处理请求。参数通常会包含在URL中，格式为key=value，多个参数之间使用&连接。

// 构建URL参数
var params = {
  key1: 'value1',
  key2: 'value2'
};

var queryString = Object.keys(params).map(key => key + '=' + params[key]).join('&');

// 发送带参数的GET请求
fetch('https://api.example.com/data?' + queryString)
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('请求失败');
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上面的代码中，我们首先构建了一个包含参数的对象params，然后使用Object.keys和map方法将参数转换为URL格式的字符串。最后将参数拼接到URL后发送GET请求。