在 Angular.js 中解析 JSONP 响应 $http.jsonp()

在使用 Angular.js 发送 JSONP 请求时，我们有时需要对响应进行解析。本文将介绍如何在 Angular.js 中解析 JSONP 响应。

JSONP 简介

JSONP 是一种跨域请求技术，允许通过动态创建 <script> 标签的方式，从其他域中获取数据。在 JSONP 请求中，服务器返回的数据格式为一个 JavaScript 函数调用，该函数的参数是要返回的数据。

例如，如果我们发送以下 JSONP 请求：

$http.jsonp('https://example.com/data?callback=JSON_CALLBACK')

服务器返回的数据可能会以以下形式呈现：

JSON_CALLBACK({"name": "John", "age": 30})

其中 JSON_CALLBACK 是回调函数的名称，其值将由 Angular.JS 自动替换为自动生成的唯一名称。这个特殊的名称确保服务器返回的数据在接收到响应后立即被执行。

解析 JSONP 响应

要解析 JSONP 响应，我们可以使用 Angular.js 的 $http.jsonp() 方法来发送 JSONP 请求，并在成功回调函数中解析响应：

$http.jsonp('https://example.com/data?callback=JSON_CALLBACK')
  .success(function(data) {
    var jsonData = angular.fromJson(data);
    console.log(jsonData.name); // 输出 "John"
    console.log(jsonData.age); // 输出 30
  });

在成功回调函数中，我们首先将响应数据转换为一个 JavaScript 对象，使用 angular.fromJson() 方法来执行这个操作。然后我们可以像访问任何其他 JavaScript 对象一样访问响应数据。

如果响应数据包含数组，可以使用 angular.fromJson() 方法将其转换为 JavaScript 数组：

$http.jsonp('https://example.com/data?callback=JSON_CALLBACK')
  .success(function(data) {
    var jsonArray = angular.fromJson(data);
    console.log(jsonArray[0]); // 输出第一个元素
  });

错误处理

在处理 JSONP 响应时，我们需要注意错误处理。当请求失败或超时时，Angular.js 会调用错误回调函数而不是成功回调函数。

可以使用以下代码来处理错误：

-- -------------------- ---- -------
--------------------------------------------------------------
  ----------------------- -
    --- -------- - -----------------------
    --------------------------- -- -- ------
    -------------------------- -- -- --
  --
  ---------------------- -
    --------------------- -------
  ---

在错误回调函数中，我们可以记录错误并采取适当的措施来解决问题。

结论

本文介绍了如何在 Angular.js 中解析 JSONP 响应。通过使用 $http.jsonp() 方法和 angular.fromJson() 方法，我们可以轻松地从其他域中获取数据并将其转换为 JavaScript 对象或数组。在处理 JSONP 响应时，请务必注意正确的错误处理。希望这篇文章能对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25109