0

Написал данный код:

const fetch_url = ({URL, BODY, CONTENT_TYPE, RESPONSE_TYPE}, METHOD) => {
  CONTENT_TYPE = Number(CONTENT_TYPE);
  RESPONSE_TYPE = Number(RESPONSE_TYPE);
  let single = METHOD === 'GET' || METHOD === 'DELETE';
  return fetch(URL, {
    method: METHOD,
    headers: single ? {} : {'Content-Type': CONTENT_TYPE === 1 ? 'text/plain' : 'application/json'},
    redirect: single ? 'follow' : 'follow',
    body: CONTENT_TYPE === 1 ? String(BODY) : JSON.stringify(BODY)})
  .then(res => {
    switch (RESPONSE_TYPE) {
      case 1:
        return res.text();
      case 2:
        return res.json();
      case 3:
        return String(res.ok);
      case 4:
        return res.status;
      case 5:
        return res.statusText;
      case 6:
        return res.type;
      case 7:
        return String(res.redirected);
      case 8:
        return res.url;
      case 9: default:
        return single ? res.url : String(res.bodyUsed);
    }
  })
  .catch(err => '');
};

Он должен служить оболочкой для использования Fetch пользователями. Сам код работал, но функционала не хватало. И я решил добавить возможность возвращать сразу несколько res

Получилось это:

const fetch_url = ({URL, BODY, CONTENT_TYPE, RESPONSES_TYPES, SPLIT}, METHOD) => {
  SPLIT = String(SPLIT);
  CONTENT_TYPE = Number(CONTENT_TYPE);
  RESPONSES_TYPES = RESPONSES_TYPES.split(' ').filter(word => word !== '');
  let single = METHOD === 'GET' || METHOD === 'DELETE';
  return fetch(URL, {
    method: METHOD,
    headers: single ? {} : {'Content-Type': CONTENT_TYPE === 1 ? 'text/plain' : 'application/json'},
    redirect: single ? 'follow' : 'follow',
    body: CONTENT_TYPE === 1 ? String(BODY) : JSON.stringify(BODY)})
  .then(res => {
    let responses = '';
    for (let i = 0; i <= RESPONSES_TYPES.length - 1; i++) {
      switch (Number(RESPONSES_TYPES[i])) {
        case 1:
          responses += SPLIT + res.text(); break;
        case 2:
          responses += SPLIT + res.json(); break;
        case 3:
          responses += SPLIT + String(res.ok); break;
        case 4:
          responses += SPLIT + res.status; break;
        case 5:
          responses += SPLIT + res.statusText; break;
        case 6:
          responses += SPLIT + res.type; break;
        case 7:
          responses += SPLIT + String(res.redirected); break;
        case 8:
          responses += SPLIT + res.url; break;
        case 9: default:
          responses += SPLIT + single ? res.url : String(res.bodyUsed); break;
      }
    }
    return SPLIT === '' ? responses : responses.slice(1);
  })
  .catch(err => '');
};

Ну и как обычно происходит в таких ситуациях код перестал нормально работать. Вместо информации с res.text() и res.json() возвращается [object Promise]

(res.status, res.type и тд. при этом работают)

Может кто-нибудь сказать как это исправить?

9
  • 1
    Сделать фукнцию асинхронной async и дожидаться выполнения fetch запроса с помощью await
    – SwaD
    18 янв в 16:37
  • Впрочем эта асинхронная функция всё равно будет возвращать промис
    – Alexey Ten
    18 янв в 18:02
  • 1
    Так res.text() и res.json() асинхронные. Т.ч. нужен еще один .then() - вот там и будут все данные.
    – ksa
    18 янв в 18:04
  • @ksa А куда можно добавить .then()? Если добавлять перед основным, то код перестаёт работать, а добавить его в case нельзя... 18 янв в 19:07
  • .then()пойдет за уже существующем .then(). Тебе в первом придется сформировать массив с уже готовыми данными и промисами. Потом дать команду return Promise.all(<этот_массив>). Второй .then() уже получит массив результатов - делай с ним что хочешь.
    – ksa
    18 янв в 19:11

1 ответ 1

0

В нашей с ТСом переписке я ему предложил вот такую модель обработки его данных. Вот только на работоспособность мне проверить это не на чем.

const fetch_url = ({
  URL,
  BODY,
  CONTENT_TYPE,
  RESPONSES_TYPES,
  SPLIT
}, METHOD) => {
  SPLIT = String(SPLIT);
  CONTENT_TYPE = Number(CONTENT_TYPE);
  RESPONSES_TYPES = RESPONSES_TYPES.split(' ').filter(word => word !== '');
  let single = METHOD === 'GET' || METHOD === 'DELETE';
  return fetch(URL, {
      method: METHOD,
      headers: single ? {} : {
        'Content-Type': CONTENT_TYPE === 1 ? 'text/plain' : 'application/json'
      },
      redirect: single ? 'follow' : 'follow',
      body: CONTENT_TYPE === 1 ? String(BODY) : JSON.stringify(BODY)
    })
    .then(res => {
      const responses = [];
      for (let i = 0; i <= RESPONSES_TYPES.length - 1; i++) {
        switch (Number(RESPONSES_TYPES[i])) {
          case 1:
            responses.push(res.text());
            break;
          case 2:
            responses.push(res.json());
            break;
          case 3:
            responses.push(String(res.ok));
            break;
          case 4:
            responses.push(res.status);
            break;
          case 5:
            responses.push(res.statusText);
            break;
          case 6:
            responses.push(res.type);
            break;
          case 7:
            responses.push(String(res.redirected));
            break;
          case 8:
            responses.push(res.url);
            break;
          case 9:
          default:
            responses.push(single ? res.url : String(res.bodyUsed));
            break;
        }
      }
      return Promise.all(responses);
    })
    .then(arr => {
      let responses = '';
      for (let i = 0; i <= RESPONSES_TYPES.length - 1; i++) {
        responses += SPLIT + arr[i];
      }
      return SPLIT === '' ? responses : responses.slice(1);
    })
    .catch(err => '');
};

Вот такой еще вариант можно сделать

const fetch_url = async({
  URL,
  BODY,
  CONTENT_TYPE,
  RESPONSES_TYPES,
  SPLIT
}, METHOD) => {
  SPLIT = String(SPLIT);
  CONTENT_TYPE = Number(CONTENT_TYPE);
  RESPONSES_TYPES = RESPONSES_TYPES.split(' ').filter(word => word !== '');
  let single = METHOD === 'GET' || METHOD === 'DELETE';
  try {
    let res = await fetch(URL, {
      method: METHOD,
      headers: single ? {} : {
        'Content-Type': CONTENT_TYPE === 1 ? 'text/plain' : 'application/json'
      },
      redirect: single ? 'follow' : 'follow',
      body: CONTENT_TYPE === 1 ? String(BODY) : JSON.stringify(BODY)
    })
    let responses = '';
    for (let i = 0; i <= RESPONSES_TYPES.length - 1; i++) {
      switch (Number(RESPONSES_TYPES[i])) {
        case 1:
          responses += SPLIT + await res.text();
          break;
        case 2:
          responses += SPLIT + await res.json();
          break;
        case 3:
          responses += SPLIT + String(res.ok);
          break;
        case 4:
          responses += SPLIT + res.status;
          break;
        case 5:
          responses += SPLIT + res.statusText;
          break;
        case 6:
          responses += SPLIT + res.type;
          break;
        case 7:
          responses += SPLIT + String(res.redirected);
          break;
        case 8:
          responses += SPLIT + res.url;
          break;
        case 9:
        default:
          responses += SPLIT + single ? res.url : String(res.bodyUsed);
          break;
      }
    }
    return SPLIT === '' ? responses : responses.slice(1);
  } catch (err) {
    return ''
  }
};
5
  • есть вероятность что такой подход не будет работать, потому что response может читать тело только один раз
    – Grundy
    18 янв в 21:26
  • Значит не получится задать 1 и 2 одновременно, вот и все.
    – ksa
    19 янв в 5:53
  • @ksa Немного задержался, но сейчас проверил. Спасибо, оба варианта работают стабильно. Возвращать сразу несколько res нельзя, но это не критично, главное, что хотя бы один экземпляр работает. Единственное я столкнулся с одной странностью. (ipapi.co/json) этот сайт возвращает ошибку в обоих вариантах, хотя чистый get() работает с ним. 20 янв в 11:53
  • @TrueFantøm, ну тут только тестить... Я показал некую иллюстрацию своего рассказа в переписке.
    – ksa
    20 янв в 13:05
  • @ksa Ладно, спасибо ещё раз тогда. 20 янв в 13:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.