在后端javascript/typescript中撰寫請求URL

有沒有什么方法可以在沒有 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}`
  }
}

查詢Dto.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 的更簡單方法，您有任何參考資料或您自己的解決方案嗎？

uj5u.com熱心網友回復：

當然，您需要使用 獲取輸入物件中的鍵/值對，Object.entries()根據是否有值過濾結果陣列，然后將其轉換為查詢字串。像這樣：

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 打字稿 网址 http请求 巢穴

上一篇：創建泛型集合函式

下一篇：我的Flask服務器App.py在AndroidDrive上不起作用