在后端 javascript/typescript 中撰写请求 URL

Question

有没有什么方法可以在没有 if-else 结构的情况下以某种方式编写请求 URL？

我正在尝试构建 URL 以请求其他服务。一共有5个参数，1个必填，4个可选。

示例：https://web-site.com/v1/assets?author=${id}&category=cat&page=1&per-page=1&sort=abc

author -- 是必须的参数。其他参数可以独立传递。

示例：

https://web-site.com/v1/assets?author=${id}&category=cat&page=1&per-page=1&sort=abc

https://web-site.com/v1/assets?author=${id}&per-page=1&sort=abc

https://web-site.com/v1/assets?author=${id}&sort=abc

https://web-site.com/v1/assets?author=${id}&category=cat&sort=abc

https://web-site.com/v1/assets?author=${id}&category=cat

我正在尝试以这种方式构建 URL：

import { QueryDto } from '../types/dtos/query.dto'

export function urlComposer(id: string, query: QueryDto) {
  if (
    query.author != undefined &&
    query.category != undefined &&
    query.page != undefined &&
    query.perPage != undefined &&
    query.sort != undefined) {
    return`https://web-site.com/v1/assets?author=${id}&category=${query.category}&page=${query.page}&per-page=${query.perPage}&sort=${query.sort}`
  } else if (
    query.author != undefined &&
    query.category != undefined &&
    query.page != undefined &&
    query.perPage != undefined
) {
    return`https://web-site.com/v1/assets?author=${id}&category=${query.category}&page=${query.page}&per-page=${query.perPage}`
  } else if (
    query.author != undefined &&
    query.category != undefined &&
    query.page != undefined
  ) {
    return`https://web-site.com/v1/assets?author=${id}&category=${query.category}&page=${query.page}`
  } else if (
    query.author != undefined &&
    query.category != undefined
  ) {
    return`https://web-site.com/v1/assets?author=${id}&category=${query.category}`
  } else if (
    query.author != undefined &&
    query.sort != undefined
  ) {
    return`https://web-site.com/v1/assets?author=${id}&sort=${query.sort}`
  } else {
    return`https://web-site.com/v1/assets?author=${id}`
  }
}

QueryDto.ts

import { ApiProperty } from '@nestjs/swagger'

export class QueryDto {
  @ApiProperty()
  author: string
  @ApiProperty({required: false})
  category?: string
  @ApiProperty({required: false})
  page?: number
  @ApiProperty({required: false})
  perPage?: number
  @ApiProperty({required: false})
  sort?: string
}

我相信存在一种更简单的方法可以在运行时完成此类 URL，您有任何参考资料或您自己的解决方案吗？

Answer 1

当然，您需要使用Object.entries()从输入对象中获取key/value对，根据是否有值过滤结果数组，然后将其转换为querystring。像这样：

class QueryDto {
  author?: string
  category?: string
  page?: number
  perPage?: number
  sort?: string
}

function urlComposer(id: string, query: QueryDto) {
  const queryString = Object.entries({ id, ...query })
                            .filter(([,value]) => value)
                            .map(([key, value]) => `${key}=${value}`)
                            .join('&')
  
  return `https://web-site.com/v1/assets?${queryString}`
}

const result = urlComposer('foo', {
  author: 'me',
  category: 'books'
})

console.log(result) // https://web-site.com/v1/assets?id=foo&author=me&category=books"

在后端 javascript/typescript 中撰写请求 URL

Compose request URL in backend javascript/typescript

javascript

typescript

url

httprequest

nestjs