javascript - 处理Promise中的错误

Question

我正在用JavaScript编写天气应用程序，您可以猜到有很多API请求。因此，我在这里向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

(Not Found)

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

cansas-city, guatemala-city etc...

因此，我想处理错误，以使该错误不会影响UI，而是发出另一个这样的请求，然后返回答案`

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

我试图通过嵌套请求来实现它，但是它不起作用

Answer 1

你可以用这样的东西

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});
  }
}