Как получить API (POST), используя один URL, но с 4 разными параметрами

Question

Хорошо, я все еще новичок в Javascript.Согласно заголовку, как получить один URL API, но с 4 различными параметрами.Моя цель - показать 4 разные категории в результате

Пример (у меня есть 4 разные категории):

const category = [1,2,3,4];

Я хочу, чтобы каждая категория вызывала api

Метод 1

Для вызова категории 1:

const url = 'http://www.myapiurl.com/thisapi';
const parameter = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=1`
    };
fetch(url, options)
        .then(response => response.json())
        .then(object => {})

Для вызова категории 2:

const url = 'http://www.myapiurl.com/thisapi';
const parameter = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=2`
    };
fetch(url, options)
        .then(response => response.json())
        .then(object => {})

Для вызова категории 3:

const url = 'http://www.myapiurl.com/thisapi';
const parameter = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=3`
    };
fetch(url, options)
        .then(response => response.json())
        .then(object => {})

Для вызова категории 4:

const url = 'http://www.myapiurl.com/thisapi';
const parameter = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=4`
    };
fetch(url, options)
        .then(response => response.json())
        .then(object => {})

Или, может быть, я могу немного упростить их следующим образом:

Метод 2

const parameter1 = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=1`
    };

const parameter2 = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=2`
    };

const parameter3 = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=3`
    };

const parameter4 = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=4`
    };

    Promise.all([
        fetch(url,parameter1).then(value => value.json()),
        fetch(url,parameter2).then(value => value.json()),
        fetch(url,parameter3).then(value => value.json()),            
        fetch(url,parameter4).then(value => value.json()),            
        ])
        .then((value) => {
           console.log(value)
          //json response
        })
        .catch((err) => {
            console.log(err);
        });

Но все это очень избыточное и бесполезное повторение.Что если у меня 50 категорий?Как мне упростить все эти вызовы Fetch API?Пожалуйста, дайте мне просветление.Заранее спасибо

Answer 1

Если ваш API гибкий, то вы можете запросить все 4 категории одновременно. Я видел API, которые делают это так:

        body: `USERID=userid&TOKEN=usertoken&CATEGORY=1,2,3,4`

И я видел, как они делают это так:

        body: `USERID=userid&TOKEN=usertoken&CATEGORY=1&CATEGORY=2&CATEGORY=3&CATEGORY=4`

Опять же, ваш API должен иметь возможность перечислять категории и возвращать результаты в каком-либо объекте или массиве.

Answer 2

Вы можете просто создать функцию, которая запускает их все:

const categories = [1,2,3,4];

const postUrls = (items) => {
  const promises = []

  items.forEach(item => {
    const url = 'http://www.myapiurl.com/thisapi';
    const options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `USERID=userid&TOKEN=usertoken&CATEGORY=${item}`
    };
    const prms = fetch(url, options)
    .then(response => response.json())
    
    promises.push(prms)
  })
  
  return Promise.all(promises)
}

postUrls(categories)
.then(data => console.log('Done!'))

Answer 3

Я бы написал функцию для преобразования идентификатора категории в Promise, а затем написал функцию-оболочку для преобразования массива идентификаторов категорий в Promise, преобразующуюся в массив результатов выборки:

const fetchCategory = (catId) => {
  const url = 'http://www.myapiurl.com/thisapi';
  const options = {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `USERID=userid&TOKEN=usertoken&CATEGORY=${catId}`
  };
  return fetch(url, options)
    .then(response => response.json())
}

const fetchCategories = (categories) => Promise.all(categories.map(fetchCategory))

const categories = [1, 2, 3, 4]

fetchCategories(categories).then(categoryResults => {
  // here categoryResults is an array of the fetch results for each category.
  console.log(categoryResults)
})

<script>
    // Faking out fetch for testing
    const fetch = (url, opts) => Promise.resolve({
      json: () => ({
        categoryId: `${opts.body.slice(opts.body.lastIndexOf('=') + 1)}`, 
        more: 'here'
      })
    })
</script>

Answer 4

Вы можете сделать еще один шаг вперед. Поскольку ваш метод, заголовки и часть тела идентичны, просто извлеките их в одну функцию. Создайте пользовательские параметры для категории, затем вызовите fetch.

const thatPostFunction = category => {
  const method = 'POST'
  const headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
  const body = `USERID=userid&TOKEN=usertoken&CATEGORY=${category}`

  return fetch(url, { method, headers, body })
}

const categories = [...category ids...]

const promises = categories.map(c => thatPostFunction(c))

Promise.all(promises)
  .then((value) => {
    console.log(value)
    //json response
  })
  .catch((err) => {
    console.log(err);
  });