nuxtjs中如何对axios二次封装

 更新时间:2023年10月12日 08:49:03   作者:Lsir1998  
这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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({})
}

axios二次封装,设置请求、响应拦截器

axios的拦截器非常好用,分为请求拦截器与响应拦截器两种,一般把拦截器卸载api文件下的xxx.js下,

xxx.js中配置,二次封装

//对于axios进行二次封装
import axios from 'axios'
//主要是要用到他的请求和拦截器(为什么要二次封装)
//1.利用axios对象的方法create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
const requests = axios.create({
    //配置对象
    baseUrl:'/api',   //基础路径,发送请求时候,代表基于哪个路径出现api
    //代表请求的时间
    timeout:5000,
})

对axios函数配置了一下,下面可以直接用requests,写拦截器

//1.利用axios对象的方法create,去创建一个axios实例

//2.request就是axios,只不过稍微配置一下

1.请求拦截器,在发请求之前,请求拦截器可以监测到,可以在请求发出去之前做一些事情

requests.interceptors.request.use((config)=>{
     //config 配置对象,对象里面有一个属性很重要,headers请求
     return config
})

2.响应拦截器:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情

 
//响应拦截器
requests.interceptors.response.use((re)=>{
    //成功的回调函数:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情
    return res.data;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('faile')) //终止Promise链子
})

最后对外暴露就完成了axios二次封装,设置了两个拦截器

export default requests;

ps完整代码

//对于axios进行二次封装
import axios from 'axios'
//主要是要用到他的请求和拦截器(为什么要二次封装)
//1.利用axios对象的方法create,去创建一个axios实例
//2.request就是axios,只不过稍微配置一下
const requests = axios.create({
    //配置对象
    baseUrl:'/api',   //基础路径,发送请求时候,代表基于哪个路径出现api
    //代表请求的时间
    timeout:5000,
})
//请求拦截器,在发请求之前,请求拦截器可以监测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
     //config 配置对象,对象里面有一个属性很重要,headers请求
     return config
})
//响应拦截器
requests.interceptors.response.use((re)=>{
    //成功的回调函数:服务器相应数据回来以后,响应拦截器可以监测到,可以做一些事情
    return res.data;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('faile')) //终止Promise链子
})
//对外暴露
export default requests;

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    这篇文章主要介绍了vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2018-03-03
  • Vue前端导出Excel文件的详细实现方案

    Vue前端导出Excel文件的详细实现方案

    在开发后台管理系统的时候,很多地方都要用到导出excel表格,比如将table中的数据导出到本地,下面这篇文章主要给大家介绍了关于Vue导出Excel文件的相关资料,需要的朋友可以参考下
    2021-09-09
  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解vue-cli 构建Vue项目遇到的坑

    详解vue-cli 构建Vue项目遇到的坑

    本篇文章主要介绍了详解vue-cli 构建Vue项目遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue 实现分页功能

    Vue 实现分页功能

    Vue提供了丰富的API和组件,可以帮助开发者快速地构建现代化的Web应用程序,本文介绍了Vue如何实现分页功能,包括数据的获取、分页器的实现和页面的渲染
    2023-09-09
  • vue3的CRON表达式组件用法解读

    vue3的CRON表达式组件用法解读

    该文档介绍了Cron表达式生成器的使用说明,该组件通过图形化界面帮助用户配置定时任务的执行计划,支持秒、分钟、小时、日、月、周等时间单位的灵活配置,并实时计算并显示最近5次执行时间
    2026-01-01
  • vue中useVModel()的使用方法(通俗易懂)

    vue中useVModel()的使用方法(通俗易懂)

    useVModel()用来实现父子组件间数据的双向绑定,若不想使用默认回调,也可以自己使用emit实现回调,这篇文章主要给大家介绍了关于vue中useVModel()使用方法的相关资料,需要的朋友可以参考下
    2024-03-03
  • 浅析Vue3中的逻辑复用

    浅析Vue3中的逻辑复用

    这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下
    2023-12-12
  • Vue路由模块化配置的完整步骤

    Vue路由模块化配置的完整步骤

    这篇文章主要给大家介绍了关于Vue路由模块化配置的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • vue element实现表格合并行数据

    vue element实现表格合并行数据

    这篇文章主要为大家详细介绍了vue element实现表格合并行数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11

最新评论