how to handle axios error unifiedly in asyncData() in SSR nuxt.js

Question

I want to handle axios errors unifiedly when the response's status code is not 2XX or 3XX .

For example, requests for captchas, the backend will return 429 status code if there are too many requests in a short time sent from one client.

models/Captcha.js

import axios from 'axios';
class Captcha{
    static async store(){
        const { data } = await axios.post(`${process.env.API_URL}/auth/captchas`);
        return data;
    }
}
export default Captcha; 

plugins/axios-interceptor.js

import axios from 'axios';

// after getting response
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        // handle errors unifiedly here
        handleErrors(error);
    }
);

in nuxt.config.js

    plugins:[
        '~/plugins/axios-interceptor'
    ],

pages/register.vue

<template>
    ...
    <img :src="captcha.image_content" @click="refreshCaptcha()">
    ...
</template>
import Captcha from '@/models/Captcha';
export default{
    async asyncData(){
        const captcha = await Captcha.store();
        return {
            captcha: captcha
        }
    },
    methods:{
        async refreshCaptcha(){
            this.captcha = await Captcha.store();
        }
    },
    ...
}

But it can't work as I expected.

1. First, I don't want to have the default errors handler by Nuxt.js

2. Second, it can't handle errors happened in node.js , I want to render the page normally when errors occurred

How can I solve it? I don't want to use callback instead of Promise or async function, because the Nuxt.js Official said they will not support it any longer in the future.

Thanks a lot!

Answer 1

The asyncData command runs on the server side and you can not use the methods and services you wrote on the client side in asyncData. In fact, the contents of asyncData are called before your project loads.