javascript - 在 fetch 中添加 catch 时出错

标签 javascript typescript ecmascript-6 fetch

在我的代码中,当我添加 catch 时, typescript 显示下一个错误:

[ts] Type 'Promise' is not assignable to type 'Promise'. Type 'void | ItemEntity[]' is not assignable to type 'ItemEntity[]'. Type 'void' is not assignable to type 'ItemEntity[]'.

另外,只有一个 thencath 我没有错误。

当我同时使用两个 thencatch 时,会出现错误。

这是代码:

// HTTP GET
getAllItems(): Promise<ItemEntity[]> {
     const request = new Request('http://localhost:4000/api/items', {
         method: 'GET',
         mode: 'cors',
         redirect: 'follow',
         headers: new Headers({
            'Content-Type': 'text/plain'
         })
     })

     return fetch(request)
      .then( (response) => (response.json()) )
      .then( (items) => (this.resolveMembers(items)) )
      // FIXME
      //.catch( (error) => (console.log(error)) );  
}

private resolveMembers (data : any[]) : ItemEntity[] {
    const items : ItemEntity[] = data.map((item) => {
        let newItem : ItemEntity = new ItemEntity();
        newItem.id = item.id;
        newItem.task = item.task;
        return newItem;
    });
    return items;
}

我已经在节点服务器上检查了功能,没有捕获,并且 GET 工作正常。

最佳答案

它告诉你,你说你的方法将返回 Promise<ItemEntity[]>但您正在尝试返回 Promise<void>

catch在 promise 链的中间意味着尝试恢复并继续在链上。您应该只捕获可以恢复的内容,否则会让错误传播并让其他人捕获它。

代码的简单恢复是返回一个空数组。我猜想随后对 then 的调用将能够处理空数组。

return fetch(request)
  .then( (response) => (response.json()) )
  .then((items) => (this.resolveMembers(items))) 
  .catch((error) => {
        console.log(error)
        return []
   })

否则你就不能让你的渔获成为链条的一部分

var promise = fetch(request)
promise.catch(console.log)
return promise
  .then( (response) => (response.json()) )
  .then((items) => (this.resolveMembers(items))) 

关于javascript - 在 fetch 中添加 catch 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46693818/

相关文章:

javascript - 创建了一个哈希,当使用长度函数时,它返回未定义

javascript - 扩展 native 对象的工厂/类

javascript - Jquery onclick 函数在动态添加的按钮元素上调用了两次

angular - 更改路线而不更改 Angular 5 中的 url

javascript - Jest 模拟类实例函数

javascript - 这些ES6导入方式有什么区别?

javascript - 'double click' 事件上的 jQuery(移动版为 dblclick)

javascript - 动态更改应用程序中不同模块的java脚本和css文件

angular - 如何在angular2中使用sharedModule?

angular - 在 Angular 4 中使用渲染器