如何为 REST API 调用编码 URL 参数？

Question

我必须创建一些我在 REST API 调用中使用的 url 参数。我正在使用 Angularjs 1.4.2 和一个将参数传递给服务函数的表单，该函数构建参数并使 $http.post 调用 API。我为参数构建块创建了一个 plunker。

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div ng-controller="mainCtrl">
      testData is: {{testData}}<p></p>
      The data is: {{data}}
    </div>
  </body>

</html>

script.js

// Code goes here
var app = angular.module("app", []);

app.controller('mainCtrl', function($scope, $httpParamSerializerJQLike) {
    //Create JavaScript object.
   var testData = {};

    //Load the object with the same data as data.
    testData = loadTestData(testData);
    console.log("testData is: " + JSON.stringify(testData));
    //testData is: {"username":"james@gmail.com","password":"myPassword","grant_type":"password","env":"dev"}

    //Use stringify to make it into a JSON string.
    $scope.testData = $httpParamSerializerJQLike(JSON.stringify(testData));
    //Decoded testData
    //={"username":"james@gmail.com","password":"myPassword","grant_type":"password","env":"dev"}

    $scope.data = $httpParamSerializerJQLike({
      "username":"james@gmail.com",
      "password":"myPassword",
      "grant_type":"password",
      "env": "dev"
    });


    function loadTestData(testData){
      testData.username = "james@gmail.com";
      testData.password = "myPassword";
      testData.grant_type = "password";
      testData.env = "dev";
      return testData; 
    }
});

我将硬编码数据放入一个名为 data 的变量中，然后使用 $httpParamSerializerJQLike 来序列化数据。使用我的硬编码数据（称为数据），一切正常，我从实际代码中的 API 调用获得 HTTP 200 成功响应。

所以我为参数创建了一个名为 testData 的 JavaScript 对象，使用 JSON.stringify 将其从对象转换为 JSON，然后使用 httpParamSerializerJQLike 序列化数据。但是，硬编码的（数据）看起来不像 testData，它会抛出 HTTP 401 错误。

我创建了一个 plunker 来尝试看看发生了什么。在 plunker 中，硬编码（数据）的结果如下：

The data is: env=dev&grant_type=password&password=myPassword&username=james@gmail.com

Here is what the testData ends up like: testData is: =%7B%22username%22:%22james@gmail.com%22,%22password%22:%22myPassword%22,%22grant_type%22:%22password%22,%22env%22:%22dev%22%7D

解码后的测试数据显然不适合 URL 字符串；

="username":"james@gmail.com","password":"myPassword","grant_type":"password","env":"dev"}

为什么会这样，我是否必须手动创建一个函数来创建 URL 字符串，或者是否有其他解决方案？

Answer 1

您可以使用 Object.entries() 获取包含 JavaScript 对象的属性和值的数组数组，使用 Array.prototype.map() 迭代数组，使用参数链 .join() "" 创建查询字符串

let o = {
  "username": "james@gmail.com",
  "password": "myPassword",
  "grant_type": "password",
  "env": "dev"
};

let props = Object.entries(o);
let params = `?${props.map(([key, prop], index) => 
                `${key}=${prop}${index < props.length -1 ? "&" : ""}`
             ).join("")}`;

console.log(params);

Answer 2

我们必须将 JavaScript 对象提供给函数 "httpParamSerializerJQLike()"，而不是您正在做的字符串 JSON.Stringify(testData).

试试这个，它对我有用：

    $scope.testData = $httpParamSerializerJQLike(testData);

现在输出是：

testData is: env=dev&grant_type=password&password=myPassword&username=james@gmail.com
The data is: env=dev&grant_type=password&password=myPassword&username=james@gmail.com

Answer 3

I'm using Angularjs 1.4.2 and a form to pass the parameters to a service function, which builds the parameters and makes the $http.post call to the API.

无需使用 $http service 手动编码 url 参数。只需使用配置对象的params 属性：

var params = {name: "joe"};
var config = { params: params };

var httpPromise = $http.post(url, data, config);

查看使用此 DEMO on PLNKR 完成的编码。

如何为 REST API 调用编码 URL 参数？

How to encode URL parameters for REST API call?

javascript

json

url-parameters

angularjs