javascript - 如何处理 Node error 'Unhandled promise rejection' 以便该页面仍然加载？

Question

我正在创建一个由 Node (Express) 服务器提供服务的 Next.js 应用程序，它通过对 API 的请求提取数据。我将请求端点保存在单独的 api 文件中:

const apiBase = 'http://www.example.com'

export default {
    news: apiBase + '/news/'
    // other endpoints
}

然后我在 getInitialProps 中执行请求，并根据请求是否出错进行条件渲染:

static async getInitialProps( { query: { slug } } ) {
    const news = await asyncReq( api.news + slug )
    return { news, error: news.status }
}

render() {
    return this.props.error ? <Error /> : <News />
}

asyncReq 是一个辅助函数，如下所示:

export const asyncReq = endpoint => {
    return 
        fetch( endpoint )
        .then( res => { return res.ok ? res.json() : res } )
}

无论是请求成功还是出现 404 或 500 错误，这一切都正常。但是假设我故意使用错误的端点:

const apiBase = 'http://www.example.com'

export default {
    news: wrongApiBase + '/news/'
    // other endpoints
}

在这种情况下，Node 会给我以下错误，因为 wrongApiBase 未定义:

UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 498)

这是它应该做的，但错误导致页面永远无法加载。我应该怎么做才能处理错误？我的想法是将 catch 语句链接到 asyncReq，但我不确定我应该从中返回什么，然后我可以在 getInitialProps 中使用>。我尝试返回 false 但没有任何变化，页面只是没有加载。

export const asyncReq = endpoint => {
    return 
        fetch( endpoint )
        .then( res => { return res.ok ? res.json() : res } )
        .catch( err => { // What should I return here? )
}

+++更新+++

事实证明，我产生的错误存在问题。正如我所说，我使用了错误的变量名 (wrongBaseApi) 来触发错误，这导致 Node 永远无法提供页面。事后看来，这是有道理的，因为这是 Node 代码的错误，而不是传入请求的错误。

通过使用正确的变量但为其分配了错误的值(实际上是错误的 API 基础，例如 http://dahfjkdahfds.com，这不是 Node 错误而是请求)，我能够使用@iKoala 和@DEVCNN 提供的 try/catch block 解决方案。所以我的代码变成了:

static async getInitialProps( { query: { slug } } ) {
    const news = await asyncReq( api.news + slug )
    return { news }
}

render() {
    // this.props.news.data
    // this.props.news.error
}

和

export async function asyncReq( endpoint ) {
    try {
        const res = await fetch( endpoint )
        return { 
            data: res.ok ? await res.json().then( val => { return val } ) : null,
            error: res.ok ? false : res.status
        } 
    } catch( error ) {
        return { error } 
    }
}

Answer 1

我认为你必须处理从 asyncReq 抛出的错误:

static async getInitialProps( { query: { slug } } ) {
  try {
    const news = await asyncReq( api.news + slug )
    return { news, error: news.status }
  } catch (err) {
    // any error, including http error 40x and 50x
    return { news: null, error: err };
  }
}