Поймать в обещаниях - PullRequest
0 голосов
/ 28 июня 2018

В следующем коде я пытаюсь отловить ошибку, связанную с неверной ссылкой. Однако вместо ошибки я получаю следующее предупреждение и ошибку

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на https://aaajsonplaceholder.typicode.com/posts. (Причина: запрос CORS не выполнен).

TypeError: NetworkError при попытке извлечь ресурс. [Узнать больше]

Вот код

    const url = 'https://jsonplaceholder.typicode.com/posts'; // This URL is valid

    async function getPostData(){
        const response = await fetch(url);
        const data = await response.json();

        return data;
    }


    document
    .getElementById('btnGET')
    .addEventListener('click',
    () => {
        getPostData()
        .then( data => console.log(data))
        .catch( () => {throw new Error('Woops! Something went wrong')});
    });

Исходя из моего понимания, следующее происходит внутри getPostData

[1] HTTP-запрос GET отправляется через Fetch API на ранее определенный URL;
[2] переменная данных инициализируется с ответом, который либо разрешает, либо отклоняет;
[3] Обещание возвращено;

Если URL-адрес недействителен, я ожидаю, что код в EventListener вызовет cache, но этого не произойдет. Что я сделал не так?

1 Ответ

0 голосов
/ 28 июня 2018

getPostData() должно throw выдать ошибку, если что-то пойдет не так, а затем catch в обратном вызове события click:

const url = 'https://jsonplaceholder.typicode.com/posts'; // This URL is valid

async function getPostData(){
  try{
    const response = await fetch(url);
    const data = await response.json();

    return data;
  }
  catch(e){
    throw new Error('Woops! Something went wrong' + e)}
  }
}


document
.getElementById('btnGET')
.addEventListener('click',
() => {
    getPostData()
    .then( data => console.log(data))
    .catch( (err) => { console.log(err)});
});
...