Как я могу вставить заявление if в эту серию обещаний? (Vue JS)

Question

(Vue JS) У меня возникают трудности при вставке оператора if в эти обещания. Я хотел бы получить «if (res.status === 200)» сразу после получения ответа. Как я могу немного разбить это? Я получаю ошибки каждый раз, когда пытаюсь.

fetchFeatured() {
console.log("fetching featured video");
  fetch(
    `${this.url}?part=${this.part}&maxResults=${
      this.maxResults
    }&playlistId=${this.playlistId}&key=${this.key}`
  )
    .then(res => res.json())
    .then(json => {
      console.log(json.items);
      this.videos = json.items;
    });
 }

Answer 1

Если вы настаиваете на управлении потоком с помощью if, в отличие от API Promise, тогда вы можете условно вернуть еще одну цепочку обещаний из then. Следующее вернется и ничего не сделает, если res.status - это что-то отличное от 200:

fetchFeatured() {
  console.log('fetching featured video');

  fetch('URL WITH PARAMS HERE')
    .then(res => {
      // Here's the `if` you're looking for:
      if (res.status !== 200) return;

      // Return a promise chain from inside our promise chain!
      return res.json().then(json => {
        console.log(json.items);
        this.videos = json.items;
      });
    });
}

Предыдущая парадигма приводит к адскому отступу - в целом вам будет намного приятнее работать с async + await:

async fetchFeatured() {
  let res = await fetch('URL WITH PARAMS HERE');
  if (res.status !== 200) return;
  let json = await res.json();
  console.log(json.items);
  this.videos = json.items;
}

Answer 2

Просто поместите чек if в первый .then.Если статус не равен 200, вы можете выдать ошибку, чтобы вырваться из цепочки .then раньше (хотя при вызове .json() в случае неправильного ответа также выдается ошибка):

fetchFeatured() {
  console.log("fetching featured video");
  const url = `${this.url}?part=${this.part}&maxResults=${
    this.maxResults
    }&playlistId=${this.playlistId}&key=${this.key}`;
  return fetch(url)
    .then(res => {
      if (res.status===200) {
        return res.json();
      } else {
        throw new Error('Status was not 200!');
      }
    })
    .then(json => {
      console.log(json.items);
      this.videos = json.items;
  });
}

Убедитесь, чтоreturn Цепочка обещаний fetch.Затем вызовы fetchFeatured могут обрабатывать ошибки, помещая .catch в конец, например

this.fetchFeatured()
  .catch((err) => {
    console.log('Bad response:', err);
    // populate error element with error message
  });