时间戳

首页 > 解决方案 > 抓住承诺

javascript - 抓住承诺

问题描述

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

跨域请求被阻止：同源策略不允许在https://aaajsonplaceholder.typicode.com/posts读取远程资源。（原因：CORS 请求未成功）。

类型错误：尝试获取资源时出现网络错误。[了解更多]

这是代码

    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] Promise 被退回；

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

标签： javascriptpromiseasync-await

解决方案

如果出现问题，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)});
});

推荐阅读