Обработка ошибок в Promise - PullRequest
Новая
       36

Обработка ошибок в Promise

0 голосов
/ 12 сентября 2018

Я пишу погодное приложение на JavaScript, и, как вы можете догадаться, существует множество запросов API. Поэтому здесь я делаю запрос к API, который затем возвращает мне изображение города. Город поступает от пользователя. 

async getCityImage(city) {
    console.log(city, 'getCityImage');
    await fetch(`https://api.teleport.org/api/urban_areas/slug:${city}/images/`)
      .then(res => res.json())
      .then((res) => {
        this.imageUrl = res.photos[0].image.mobile;
      });
  }
}

Проблема в том, что пользовательский ввод может быть неуместным, и, конечно, API вернет ошибку, подобную этой 

> GET https://api.teleport.org/api/urban_areas/slug:munchen/images/ 404

(не найдено) 

For example there are some cities which names are separated by hyphen

Канзас-сити, Гватемала-сити и т.д ...

Итак, я хотел бы обработать ошибки, чтобы ошибка не влияла на пользовательский интерфейс, но сделайте еще один запрос, подобный этому, и затем верните ответ `

GET https://api.teleport.org/api/urban_areas/slug:${city}-city/images/

Я пытался сделать это с вложением запросов внутри, но это не работает

Ответы [ 4 ]

0 голосов
/ 12 сентября 2018

Вот решение для меня, может быть, не самое лучшее, но в этом случае оно мне помогает.

getCityImage(city, hyphen) {
    console.log(city, 'getCityImage');
    return fetch(`https://api.teleport.org/api/urban_areas/slug:${city}/images/`)
      .then(res => res.json())
      .then((res) => {
        if (res.status === 404)
          return fetch(`https://api.teleport.org/api/urban_areas/slug:${city}-city/images/`)
            .then(res => res.json());
        else
          return res;
      })
      .then((res) => {
        this.imageUrl = res.photos[0].image.mobile;
      })
      .catch((err) => {
        console.log(err, 'erroroooooooorr');
      });
}
0 голосов
/ 12 сентября 2018

Вы можете использовать оператор try catch следующим образом: 

async getCityImage(city) {
  let res;
  try {
    res = await fetch(`https://api.teleport.org/api/urban_areas/slug:${city}/images/`); 
    return res.photos[0].image.mobile;
  } catch(e) {
    // here you can do something when the request fails
    res = await trySomethingElse();
    return res
  }
}
0 голосов
/ 12 сентября 2018

Вы можете сделать что-то вроде этого -

Собственный API извлечения - ОБНОВЛЕНО 

(async () => {

    async function getCityImage(city) {
        let response = await fetch(`https://api.teleport.org/api/urban_areas/slug:${city}/images/`);
        if (response && response.status && response.status === 200) {
            const json = await response.json();
            return json.photos[0].image.mobile;
        } else {
            throw Error(`got error, error code - ${response.status}`);
        }
    }

    try {
        console.log(await getCityImage("london"));
        console.log(await getCityImage(null));
    } catch (error) {
        console.error(error);
    }

})();
0 голосов
/ 12 сентября 2018

вы можете использовать что-то вроде этого 

async getCityImage(city) {
    console.log(city, 'getCityImage');
    await fetch(`https://api.teleport.org/api/urban_areas/slug:${city}/images/`)
      .then(res => res.json())
      .then((res) => {
        this.imageUrl = res.photos[0].image.mobile;
      })
      .catch((e) => { //do something with error});
  }
}
...