Як перевірити, чи є відповідь вибірки об’єктом json у javascript


94

Я використовую fetch polyfill для отримання JSON або тексту з URL-адреси, я хочу знати, як я можу перевірити, чи є відповідь об’єктом JSON, чи це лише текст

fetch(URL, options).then(response => {
   // how to check if response has a body of type json?
   if (response.isJson()) return response.json();
});

Відповіді:


162

Ви можете перевірити content-typeвідповідь, як показано в цьому прикладі MDN :

fetch(myRequest).then(response => {
  const contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) {
    return response.json().then(data => {
      // process your JSON data further
    });
  } else {
    return response.text().then(text => {
      // this is text, do something with it
    });
  }
});

Якщо вам потрібно бути абсолютно впевненим у правильності вмісту JSON (і не довіряти заголовкам), ви завжди можете просто прийняти відповідь як textі проаналізувати її самостійно:

fetch(myRequest)
  .then(response => response.text())
  .then(text => {
    try {
        const data = JSON.parse(text);
        // Do your JSON handling here
    } catch(err) {
       // It is text, do you text handling here
    }
  });

Асинхронізація / очікування

Якщо ви використовуєте async/await, ви можете написати це більш лінійно:

async function myFetch(myRequest) {
  try {
    const reponse = await fetch(myRequest); // Fetch the resource
    const text = await response.text(); // Parse it as text
    const data = JSON.parse(text); // Try to parse it as json
    // Do your JSON handling here
  } catch(err) {
    // This probably means your response is text, do you text handling here
  }
}

1
За допомогою тієї ж стратегії ви можете просто використовувати response.json у поєднанні з catch; якщо ви виявили помилку, це означає, що це не json. Хіба це не був би більш ідіоматичним способом обробки цього (замість того, щоб скинути response.json)?
Wouter Ronteltap

3
@WouterRonteltap: Чи не дозволяється тобі робити лише те чи інше. Здається, я пам’ятаю, що ви отримуєте лише один постріл у response.anything (). Якщо так, JSON є текстом, але текст не обов'язково є JSON. Тому спочатку потрібно зробити впевнену справу, а саме .text (). Якщо ви спочатку зробите .json (), і це не вдається, я не думаю, що ви отримаєте можливість також зробити .text (). Якщо я помиляюся, будь ласка, покажіть мені інше.
Lonnie Best

2
На мій погляд, ви не можете довіряти заголовкам (хоч і слід, але іноді ви просто не можете керувати сервером з іншого боку). Тож чудово, що ви також згадали у своїй відповіді спробу ловити.
Яків

2
Так, @Lonnie Best є абсолютно правильним у цьому. якщо ви зателефонуєте .json () і він видасть виняток (оскільки відповідь не є json), ви отримаєте виняток "Тіло вже спожито", якщо згодом зателефонувати .text ()
Енді

2

Ви можете зробити це чисто за допомогою допоміжної функції:

const parseJson = async response => {
  const text = await response.text()
  try{
    const json = JSON.parse(text)
    return json
  } catch(err) {
    throw new Error("Did not receive JSON, instead received: " + text)
  }
}

А потім використовуйте його так:

fetch(URL, options)
.then(parseJson)
.then(result => {
    console.log("My json: ", result)
})

Це призведе до помилки, щоб ви могли catchце зробити, якщо хочете.


1

Використовуйте парсер JSON, такий як JSON.parse:

function IsJsonString(str) {
    try {
        var obj = JSON.parse(str);

         // More strict checking     
         // if (obj && typeof obj === "object") {
         //    return true;
         // }

    } catch (e) {
        return false;
    }
    return true;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.