nuxt服务端渲染时多个并发请求的其中一个接口出错导致整个页面渲染不出来

Question

最近在用nuxt.js做服各端渲染的项目发现了一个问题。比如说一个页面有多个的并发请求，其中只要有一个请求出现问题，那整个页面就出不了。用客户端做渲染的时侯，通常可以给个弹窗，展示下服务端反回的错误信息。
那么问题来了1.在用nuxt的时候怎么才能够尽可能的保证接口出问题时，页面不会完全崩溃。2.如何快速定位错误

Answer 1

请问解决了吗

Answer 2

所有的服务端渲染方法（asyncData、fetch ...）都增加异常捕获代码
错误跳转到指定页面或给予提示就好了。

async asyncData({ app, store, redirect }) {
    if (process.server) {
      const [error, { data }] = await exception(
        app.$http().serverGet(store.state.token, '/personal/info'),
        redirect
      )
      if (error) {
        return false
      }
      return {
        biz: data
      }
  })
}

export default function exception(promise, redirect) {
  return promise
    .then(response => {
      if (response && response.code === '000000') {
        if (response.data) {
          // eslint-disable-next-line
          return [{ data, status }, null]
        } else {
          return [true, null]
        }
      } else if (response.code === 'SYS002') {
        redirect({
          path: '/login'
        })
      } else {
        return [null, response]
      }
    })
    .catch(error => {
      return [error, { data: null }]
    })
}

Answer 3

• axios、fetch都可以再封装一次，

在catch可以做处理吧，只要这个页面的主模块接口没有挂，都应该显示出来，
如果主模块都挂了，可以直接去500、404页面！

Answer 4

axios请求要全局封装一下的。
响应拦截里错误时reject.
用的时候catch里提示错误。

Answer 5

1. 用vue的 errorCaptured 拦住vue实例中冒泡的error
2. 不在vue实例中出的错在debug的时候排查，要么.catch，要么try catch，谁让浏览器执行JS的主线程是单线程呢

Answer 6

调试吗？调试的话看看报错就行了吧

线上的话，有个请求挂了就直接去 error 页面好了