Question

我正在尝试构建一个从REST服务获取数据的URL，一个有效的URL应该是这样的

http://SITENAME/api/get_posts/?count=5&page=1&post_type=gallery

我的观点包括计数，页面， post_type 等等。这些是可选参数，一个或全部可以为null 我尝试了以下代码

var query = 'http://localhost/wptest/api/get_posts/?';
fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {

    if (this.countIn)   //if count not null, add count parameter.
        query = `${query}&count=${this.countIn}`;
    if (this.pageIn)  
        query = `${query}&page=${this.pageIn}`;
    if (this.typeIn)  
        query = `${query}&post_type=${this.typeIn}`;

    return this.http.get(query).map(res => res.json());
}

这个丑陋的代码返回无效的网址，当我转到chrome debugger =＆gt;网络标签我发现：

然而，我没有得到异常，因为不知何故，url得到修复并发送带有效网址的新请求：

问题在于?count=5&page=1和?&count=5&page=1

之间的差异

这导致制表符微调器被卡住并且永远不会结束。

问：为了获得有效的网址，我们可以对代码进行哪些改进？

Answer 1

保持当前代码的一般结构，您可以添加一个使用＆＃39;＆amp;＆＃39;设置的变量。在第一次使用它之后。

fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {
    var prepend = '';
    if (this.countIn)  { 
        query = `${query}` + prepend + `count=${this.countIn}`;
        prepend = '&';
    }
    if (this.pageIn)  {
        query = `${query}` + prepend + `page=${this.pageIn}`;
        prepend = '&';
    }
    if (this.typeIn)  {
        query =  `${query}` + prepend + `post_type=${this.typeIn}`;
        prepend = '&';
    }

    return this.http.get(query).map(res => res.json());
}

还有其他方法可以实现您想要实现的目标，但这是实现目标的一种方式。

Answer 2

var params = [], // your params here
    self = this;
[["count", "countIn"], ["page", "pageIn"], ["post_type", "postIn"]]
  .forEach(function(param) { 
     if(self[param[1]]) params.push(param[0] + "=" + self[param[1]]); 
  });
var query = `${query}` + params.join("&");

Answer 3

尝试：

var query = 'http://localhost/wptest/api/get_posts/?';
var counter = 0;
fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {

if (this.countIn && counter = 0){  //if count not null, add count parameter.
    query = `${query}count=${this.countIn}`;
counter++;
}
elseif(this.countIn){  //if count not null, add count parameter.
    query = `${query}&count=${this.countIn}`;
} 

if (this.pageIn && counter = 0){  //if count not null, add count parameter.
    query = `${query}count=${this.pageIn}`;
counter++;
}
elseif(this.pageIn){  //if count not null, add count parameter.
    query = `${query}&count=${this.pageIn}`;
} 

if (this.typeIn && counter = 0){  //if count not null, add count parameter.
    query = `${query}count=${this.typeIn}`;
counter++;
}
elseif(this.typeIn){  //if count not null, add count parameter.
    query = `${query}&count=${this.typeIn}`;
} 



return this.http.get(query).map(res => res.json());
}

    query = `${query}&post_type=${this.typeIn}`;

这是我相信的解决方法。

带有可选参数

3 个答案: