Vue SSR 项目 Nuxt.js 框架之《axios的 请求

# 前言

在Vue中我们想二次封装axios，以便增加响应和请求拦截器等一些公共配置。我们可以新建一个j类似http.js文件，在里面写我们想要的配置，之后再main.js里引入即可，那在nuxt中如何实现呢？

# 第一步：创建文件 axios.js

在plugins文件夹下创建axios.js文件。内容如下：

export default function({ $axios, redirect, router, store }) {
    // 基本配置
    $axios.defaults.timeout = 10000;

    // 请求拦截
    $axios.onRequest(config => {

        // 可设置同意的请求配置
        config.headers.token = '项目的tolen';

        return config;
    })

    // 响应拦截

    $axios.onResponse(res => {

        // 可做一些状态的判断，如: 请求失败、token过时 ...

        return res;
    });

    $axios.oeError(err => {

        // 可以一些错误处理

        return err;
    })

}

# 第二步：配置 nuxt.config.js

export default{
    pligins: [
        '@/plugins/element-ui', '@/plugins/router'
        {
            src: '~/plugins/axiox',
            ssr: true // 开启服务端渲染
        }
    ]
}

重启之后就是见证奇迹的时刻 ~~ 欢迎留言 ~~~