Question

在以下代码中，我试图捕获与无效链接相关的错误。但是，我收到以下警告和错误而不是错误

跨源请求被阻止：同源策略禁止阅读   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]通过Fetch API向先前定义的URL发出HTTP GET请求；
[2]使用响应初始化数据变量，该响应可以是“解析”或“拒绝”；
[3]承诺已返回；

如果URL无效，我希望EventListener中的代码触发cache，但不会发生。我做错了什么？

Answer 1

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

兑现承诺

1 个答案: