Есть ли простой способ получить более одного запроса - PullRequest
Новая
       31

Есть ли простой способ получить более одного запроса

0 голосов
/ 28 апреля 2020

Я хочу сделать http-запрос, используя fetch(). Запрос более одного запроса от одного домена (это просто другая конечная точка).

Я сделал свой код следующим образом:

Получить первые данные (номер главы и стиха): 

static getData(keyword) {

      return fetch(`https://api.banghasan.com/quran/format/json/cari/${keyword}/bahasa/id/mulai/0/limit/100`)
         .then(resolve => {
            return resolve.json()
         })
         .then(rj => {
            if (rj.status == 'ok') {
               return Promise.reject(`The "${keyword}" keyword is not found`);
            } else {
               return Promise.reject(`Something Wrong`)
            }
         })
         .catch(error => {
            return Promise.reject(error);
         })
   }

Если getData возвращает `resol ', есть число главы и стихов Затем получите стихи: 

   static async getAyat(surat, ayat) {
      return fetch(`https://api.banghasan.com/quran/format/json/surat/${surat}/ayat/${ayat}`)
         .then(resolve => {
            return resolve.json()
         })
         .then(rj => {
            if (rj.status == 'ok') {
               return Promise.resolve(rj.ayat.data);
            } else {
               return Promise.reject('Terjadi kesalahan')
            }
         })
         .catch(error => {
            return Promise.reject(error);
         })
   }

Наконец, получите примечания, если стиху есть что объяснить 

static getNote(num) {
      return fetch(`https://api.banghasan.com/quran/format/json/catatan/${num}`)
         .then(resolve => {
            return resolve.json()
         })
         .then(rj => {
            if (rj.status == 'ok') {
               return Promise.resolve(rj.catatan.teks)
            } else {
               return Promise.reject('Terjadi kesalahan')
            }
         })
         .catch(error => {
            return Promise.reject(error);
         })
   }

Код работает правильно. Я просто хочу знать, есть ли простой способ написать это?

1 Ответ

1 голос
/ 28 апреля 2020

Используйте функцию. Спросите себя, какие части одинаковы с разными, а затем возьмите разные части и задайте их параметры.

В вашем случае вот что отличается:

  1. Аргументы функция
  2. Генерация URL
  3. Данные, которые вы извлекаете из ответа

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

const baseUrl = 'https://api.banghasan.com/quran/format/json';
const returnAllData = data => data;

function createFetchMethod(urlBuilder, dataExtractor = returnAllData) {
  return async (...params) => {
    const url = urlBuilder(...params);
    const response = await fetch(`${baseUrl}${url}`);
    if (!response.ok) {
      throw new Error("Something's wrong");
    }

    const json = await response.json();
    if (json.status !== 'ok') {
      throw new Error("Something's wrong");
    }

    return dataExtractor(json);
  }
}

Способ, которым вы использовали бы это, состоит в том, чтобы создавать ваши методы следующим образом: 

const getData = createFetchMethod(
  keyword => `/cari/${keyword}/bahasa/id/mulai/0/limit/100`
);
const getAyat = createFetchMethod(
  (surat, ayat) => `/surat/${surat}/ayat/${ayat}`,
  json => json.ayat.data
);
const getNote = createFetchMethod(
  num => `/catatan/${num}`,
  json => json.catatan.teks
);

Теперь их можно вызывать, как и раньше, инкапсулируется только вся обработка ошибок. Вы можете дополнительно настроить, добавив больше параметров.

Обратите внимание, что одна потенциальная проблема с вашим строительным кодом URL заключается в том, что если вводимые параметры не являются URL-безопасными, вам нужно вызвать encodeURIComponent, чтобы они экранировали специальные символы.

...