ajax 请求聚合api_API请求

在JavaScript中,我们可以使用XMLHttpRequest或更现代的fetch API来执行AJAX请求,以下是如何使用这两种方法来聚合API请求的示例。

ajax 请求聚合api_API请求
(图片来源网络,侵删)

使用 XMLHttpRequest

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', 'https://api.example.com/data1', true);
// 设置请求完成后的处理函数
xhr.onload = function () {
  // 当请求成功并且服务器返回了200的状态码时
  if (xhr.status === 200) {
    // 解析返回的JSON数据
    var data1 = JSON.parse(xhr.responseText);
    // 再次发送请求
    var xhr2 = new XMLHttpRequest();
    xhr2.open('GET', 'https://api.example.com/data2', true);
    xhr2.onload = function () {
      if (xhr2.status === 200) {
        // 解析返回的JSON数据
        var data2 = JSON.parse(xhr2.responseText);
        // 在这里你可以处理这两个数据集
        console.log(data1, data2);
      }
    };
    xhr2.send();
  }
};
// 发送第一个请求
xhr.send();

使用 fetch API

// 发送第一个请求
fetch('https://api.example.com/data1')
  .then(response => response.json())
  .then(data1 => {
    // 当第一个请求成功时,发送第二个请求
    return fetch('https://api.example.com/data2');
  })
  .then(response => response.json())
  .then(data2 => {
    // 在这里你可以处理这两个数据集
    console.log(data1, data2);
  });

以上代码首先会向 'https://api.example.com/data1' 发送一个GET请求,然后等待响应,响应到达后,它会将响应体解析为JSON,并将结果传递给下一个 .then(),它会向 'https://api.example.com/data2' 发送第二个GET请求,同样等待响应并解析为JSON,它将两个数据集打印到控制台。

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/683113.html

(0)
未希新媒体运营
上一篇 2024-06-12 06:40
下一篇 2024-06-12 06:42

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购  >>点击进入