Как получить 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? Пожалуйста, дайте мне просветление. заранее спасибо

javascript api fetch

0

user11212367 1 Май 2019 в 17:46

Answer 1

Вы можете сделать еще один шаг вперед. Поскольку ваш метод, заголовки и часть тела идентичны, просто извлеките их в одну функцию. Создайте пользовательские параметры для категории, а затем вызовите 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);
  });

0

Joseph 1 Май 2019 в 15:19

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!'))

0

Hybrid 1 Май 2019 в 15:16

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>

0

Scott Sauyet 1 Май 2019 в 15:13

Answer 4

Если ваш 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 должен иметь возможность перечислять категории и возвращать результаты в каком-либо объекте или массиве.

0

Intervalia 1 Май 2019 в 15:24

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

4 ответа

Похожие вопросы

Новые вопросы

javascript