nuxtjs中对axios二次封装

plugins文件夹新建request.js

import { Message} from "element-ui";
export default function ({ $axios,redirect,$cookies}) {
    //请求域名
    if(process.env.NODE_ENV == 'development'){
        $axios.baseURL = '';
    }else if(process.env.NODE_ENV == 'debug'){
        $axios.baseURL = '';
    }else if(process.env.NODE_ENV == 'product'){
        $axios.baseURL = '';
    }
    $axios.onRequest(config => {
        //此处的$cookies为cookie-universal-nuxt,当然也可以使用其它的缓存工具类
        //loginInfo 是登录态
        const loginInfo = $cookies.get('loginInfo')  
         //区分axios的post请求和其它请求  因为post请求为data参数而get则为params参数
        if(config.method == 'post'){
            if(loginInfo && config.data){
            //Object.assig为合并对象，将token和其它参数合并，当然和接口文档有关，有的是要求                                            
            //token放在请求头中的，依据接口文档而定
                config.data = Object.assign(config.data,loginInfo)
            }
        }else{
            if(loginInfo && config.params){
                config.params = Object.assign(config.params,loginInfo)
            }
        }
        return config
    })
    $axios.onResponse(response => {
        if(process.server){ //判断是服务端还是客户端的请求
            return response.data
        }
        //状态码依接口文档而定
        if(!process.server && response.data.code == '401'){
            return Message({
                type:'error',
                message:'您还未登录',
                duration:1500
            })
        }
        if(!process.server && response.data.code == '400'){
            Message({
                type:'error',
                message:response.data.msg,
                duration:1500
            })
            return response.data
        }
        if(!process.server && response.data.code == '404'){
            Message({
                type:'error',
                message:response.data.msg,
                duration:1500
            })
            return response.data
        }
        if(!process.server && response.data.code == '200'){
            return response.data
        }
    })
 
    $axios.onRequestError(err => {
        console.log(err)
    })
 
    $axios.onResponseError(err => {
        console.log(err)
    })
 
    $axios.onError(error => {
        const code = parseInt(error.response && error.response.status)
        if (code === 400) {
            redirect('/')
        }
    })
}

对api进行同一管理，在plugins文件夹下新建api.js

export default ({$axios},inject) => {

     inject('base',(params)=>$axios({
        url:'/appapi/config/base',
        method:'GET',
        params
    }))

    //多个可以继续往后写inject，inject第一个参数随便取名
}

在nuxt.config.js中配置

export default {
    plugins: [
    '@/plugins/request',
    '@/plugins/api',
  ],
}

在页面组件中使用方法

export default{
    async asyncData(app){
        const list = await app.$base({})
    },
    //methods中使用可以通过this.$base({})
}