^未运行功能答案

【问题标题】：^Not running function^未运行功能
【发布时间】：2016-11-24 22:00:41
【问题描述】：

由于某种原因，脚本无法运行或返回答案。控制台什么都不是。试图获得 yandex.transtale 网站的答案 (https://tech.yandex.com/translate/doc/dg/reference/translate-docpage/) 代码：http://jsbin.com/jolijep/edit?html,js,console,output

var app = angular.module('jsbin', []);

app.controller('DemoCtrl', function($scope, $http) {
  var url = "https://translate.yandex.net/api/v1.5/tr.json/translate";
  keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";
  var vm = this;
  $scope.SendData = function() {
    // тут данные
    var textApi = 'Hello';
    var langApi = 'en-ru';
    var text1 = 'Hello';
    var data = "key=" + keyAPI + "&text=" + textApi + "&lang=" + langApi;


    $http.post(url, data)
      .success(function(data, status, headers, config) {
        vm.data = response.data;
        $scope.PostDataResponse = data;
        console.log(data);
      })
      .error(function(data, status, header, config) {
        $scope.ResponseDetails = "Data: " + data +
          "<hr />status: " + status +
          "<hr />headers: " + header +
          "<hr />config: " + config;
      });
  };
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="weather.js"></script>
</head>

<body ng-app="jsbin">
  <div ng-controller="DemoCtrl as vm">
    <script src="weather.js"></script>
    <button ng-click="SendData()">Send</button>
    <br>Data: {{PostDataResponse}}
    <br>{{vm.data}} {{vm.PostDataResponse}} Data: {{scope.PostDataResponse}} {{vm.data}}
  </div>
</body>

</html>

【问题讨论】：

它进入错误阻止我的朋友。
在控制台中，没有错误。

标签： javascript angularjs api yandex yandex-api

【解决方案1】：

如果您查看 Yandex 翻译 API 参考，它会要求您以 params(parameter) 的形式传递您正在发出的请求的信息。这些参数将附加到请求 URL。

通过 POST 请求从 API 获取信息的其他方法是以该请求正文的形式传递信息。

但带有 POST 请求的 Yandex 翻译 API 要求提供附加到 url 的信息。

var data = "key="+keyAPI+"&text="+textApi+"&lang="+langApi

当向 API 发出 POST 请求时，应该将这个 data 变量附加到 url 变量中。但是，

$http.post(url, data)

调用 $http 方法将数据解释为 post 请求的主体，而不是将 data 变量附加到 url打电话。

AngularJS 的 $http API 的一个更简洁和正确的实现是将所有参数放在一个对象中，其中键是参数类型，值是参数值。

var params = {
      key: keyAPI,
      text:textApi,
      lang:langApi
}

现在在 params 对象中，您保存了在发出请求时想要传递的所有信息。

其次，您需要修改 $http 请求，以便它知道要附加到 url 的参数。我正在使用更基本的 $http 方法而不是 $http.post 方法，我将清楚地提到基本 url、HTTP 请求的方法类型，最后是与请求一起传递给 API 的参数。

$http({
   url: url,
   method: 'POST',
   params: params
})
.success(function(data,headers,status,config){
  $scope.PostDataResponse = data;
  vm.data = data;
  console.log(data);
 })
.error(function(data,headers,status,config){
 $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
});

您的代码中的另一个错误是 $scope.PostDataResponse

的初始化

 $scope.PostDataResponse = response.data; //You are not getting any argument named response by the success function call

正确的做法是 $scope.PostDataResponse = 数据；

现在，如果您运行带有修改的代码，它应该运行得很好。

如果一切都正确完成，那么在开发者控制台中，您会发现请求成功后记录的对象。

Object with the success of the call

在您的网页中，您也会看到相同的对象。

【讨论】：

我也在考虑 weather.js 是您定义角度模块的 JS 脚本
我发现错误：无效的 API 密钥。 jsbin.com/sejupidabi/edit?html,js,console,output
@Dmitry ：正如我所提到的， params 应该是一个对象而不是字符串，在您的代码中，您再次创建了一个字符串并将其分配给 params，而不是一个对象