如何在 Nuxt 插件中使用错误功能？

Posted 2023-02-22

【中文标题】如何在 Nuxt 插件中使用错误功能？

【英文标题】：How Can I use error function in Nuxt Plugin?

【发布时间】：2018-12-06 23:09:54

【问题描述】：

我正在使用 Nuxt 和 axios-module。

我试图通过 axios 全局拦截器进行全局错误处理。

如何在 Nuxt 插件中使用错误函数？

// ~/plugins/axios.js

export default function ( $axios, store, redirect, error ) 
 $axios
 .onError(apiError => 
   error(statusCode: '403', message: 'test') // It's not work.
   redirect('http://google.com') // It's work.
  )

重定向有效。但错误不起作用。只显示server error page。

【问题讨论】：

它有效。它显示你是 403 错误的调试页面

@Aldarund 我知道错误函数会重定向到自定义错误页面。在中间件中，错误函数重定向到自定义错误页面。

不明白。你用 403 代码调用错误。你看到的结果是 403 代码的错误页面。你期待什么？

@Aldarund 我想通过错误函数重定向错误拦截器上的“自定义”错误页面。

那么你只需要自定义你的错误页面布局/error.vue

【参考方案1】：

现在可以在@nuxtjs/axios Helper ?

export default function ( $axios, error: nuxtError ) 
  $axios.onError(error => 
    nuxtError(
      statusCode: error.response.status,
      message: error.message,
    );
    return Promise.resolve(false);
  )

【参考方案2】：

您的插件函数应该在调用error 函数后返回一个promise 并解析，因为Nuxt.js 将插件函数视为一个promise。就这样。

export default function ( $axios, error ) 
  return new Promise(resolve => 
    $axios.onError(apiError => 
      error( statusCode: 403, message: 'test' ))
      resolve()
    
  )

【参考方案3】：

您可以使用 Axios 帮助程序来处理有助于处理拦截的 Nuxt 错误。

export default function ( $axios, store, redirect, error: nuxtError ) 
  $axios.onError(error => 
    nuxtError(
      statusCode: error.response.status,
      message: error.message,
      if(statusCode === 403)
        redirect('http://example.com')
      
    );
    return Promise.resolve(false);
  )

详情请参阅@nuxt/axios helpers，有关详情请参阅extending axios

【参考方案4】：

我也有同样的问题。

检查我的代码后，我发现当您在 asyncData 方法中仅请求一次数据时，插件中的错误方法有效。但是，如果您多次请求，错误方法可能不起作用。此方法无法停止在 asyncData 方法中返回数据。

所以，我的解决方案是在您构建的 axios 插件中检查响应，并在您使用 promise.all() 请求多个 api 时检查响应。如果不合格，停止返回数据。

【讨论】：

欢迎来到 ***，如果需要理解答案，请添加更多描述和代码，因为它会尽快解决其他人的问题。