JavaScript API 调用函数：使用回调函数处理响应

本文将介绍使用 JavaScript 的 XMLHttpRequest 对象进行 API 调用，并使用回调函数处理响应。

使用回调函数的 API 调用函数

以下代码展示了如何使用回调函数处理 API 调用响应：

function callAPI(url, query, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var json = JSON.parse(xhr.responseText);
      var response = json.data.answer;
      callback(response);
    } else if (xhr.readyState === 4) {
      callback(null);
    }
  };

  var data = JSON.stringify({ query: query });
  xhr.send(data);
}

代码解释：

callAPI(url, query, callback) 函数接受三个参数：
- url: API 的 URL 地址
- query: 发送到 API 的请求数据
- callback: 回调函数，用来处理 API 响应
xhr.onreadystatechange 属性监听 XMLHttpRequest 对象的状态变化，当状态为 4 且状态码为 200 时，表示 API 调用成功，并执行回调函数 callback。
如果 API 调用失败（状态码不为 200），则 callback 函数将传入 null。

示例使用

// 示例使用
callAPI('https://example.com/api', 'hello', function(response) {
  if (response) {
    console.log(response);
  } else {
    console.log('Error occured');
  }
});

代码解释：

使用 callAPI 函数进行 API 调用，传入 API 地址、请求数据和回调函数。
回调函数检查 response 是否为空，如果为空则表示 API 调用失败，否则输出 API 返回的数据。

总结

使用回调函数处理 API 响应是一种常见的做法，它允许您在 API 调用完成后执行自定义操作。通过使用回调函数，您可以根据 API 响应结果进行不同的处理，例如更新页面内容、显示错误信息等。