如何处理fetch（）中的错误请求

debugcn 发表于 Dev

Muflix

我知道这是一个基本且经常发生的问题，但是我仍然无法使其正常工作。

我有以下代码

handleAdd = (event: any): void => {
        
    // ...
        
    // create new task
    try {
          // send data to backend
          fetch(`/api/tasks?name=${name}&priority=${priority}`, { method: 'post' })
                .then(response => { if (!response.ok) {  
                       throw new Error('error => how to get bad request message here?') } })
    }
    // handle exception
    catch (e) {
          console.log(e);
          this.setState({
               isError: true,
               errorMessage: e.message
          });
    }
}

API返回400，并显示一些错误消息

但是在浏览器中

所以我有两个问题

为什么throw new Error()in fetch不会进入catch(e) {}方法（如果错误不在fetch函数之外，则效果很好）？如何重写此行以进入catch方法？我认为这与Promise对象有关吗？
如何从响应对象中获取错误的请求消息？

更新，工作解决方案

fetch(`/api/tasks?name=${name}&priority=${priority}`, { method: 'post' })
    .then(response => {
        if (!response.ok) {
                  
            response.text().then(function (text) {
                throw Error(text);
            }).catch((e) => {
                this.setError(e.message);
            });

        }
    })

如何使response.text（）进入Error异常？

布扎托

使用Promise时，您可以选择使用then / catch链接您的Promise或使用async / await。

如果您要链接，请确保您要链接：

handleAdd = (event: any): void => {
    // send data to backend
    fetch(`/api/tasks?name=${name}&priority=${priority}`, { method: 'post' })
        .then(response => { if (!response.ok) {  
              throw new Error('error => how to get bad request message here?') } }
        ).catch((e) => {
            console.log(e);
            this.setState({
              isError: true,
              errorMessage: e.message
            })
        });
}

如果愿意，可以将功能更改为异步/等待。这样，您将使用try / catch块：

// mark your function as async
handleAdd = async (event: any): void => {

  try {
    // await your fetch response
    const response = await fetch(`/api/tasks?name=${name}&priority=${priority}`, { method: 'post' })
    if (!response.ok) {  
      throw new Error('error => how to get bad request message here?')
    }  
  }
  // handle exception
  catch (e) {
    console.log(e);
    this.setState({
          isError: true,
          errorMessage: e.message
    });
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。