vue中axios的二次封装实例讲解

 更新时间:2019年10月14日 15:46:35   作者:CodeBug  
在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结,需要的朋友们可以学习下。

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理

第一步,先在src中的公共文件夹中如utils里新建request.js文件

import axios from 'axios'
import router from '@/router/routers'
import { Notification, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
import Config from '@/config'
 
import {baseUrl} from '@/utils/env'
 
// 创建axios实例
const service = axios.create({
 baseURL: baseUrl, // api 的 base_url
 // baseURL: process.env.BASE_API, // api 的 base_url
 timeout: Config.timeout // 请求超时时间
})
 
// request拦截器
service.interceptors.request.use(
 config => {
  if (getToken()) {
   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  config.headers['Content-Type'] = 'application/json'
  return config
 },
 error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
 }
)
 
// response 拦截器
service.interceptors.response.use(
 response => {
  const code = response.status
  console.log(response)
  if (code < 200 || code > 300) {
   Notification.error({
    title: response.message
   })
   return Promise.reject('error')
  } else {
   return response.data
  }
 },
 error => {
  let code = 0
  try {
   code = error.response.data.status
  } catch (e) {
   if (error.toString().indexOf('Error: timeout') !== -1) {
    Notification.error({
     title: '网络请求超时',
     duration: 2500
    })
    return Promise.reject(error)
   }
   if (error.toString().indexOf('Error: Network Error') !== -1) {
    Notification.error({
     title: '网络请求错误',
     duration: 2500
    })
    return Promise.reject(error)
   }
  }
  if (code === 401) {
   MessageBox.confirm(
    '登录状态已过期,您可以继续留在该页面,或者重新登录',
    '系统提示',
    {
     confirmButtonText: '重新登录',
     cancelButtonText: '取消',
     type: 'warning'
    }
   ).then(() => {
    store.dispatch('LogOut').then(() => {
     location.reload() // 为了重新实例化vue-router对象 避免bug
    })
   })
  } else if (code === 403) {
   router.push({ path: '/401' })
  } else {
   const errorMsg = error.response.data.message
   if (errorMsg !== undefined) {
    Notification.error({
     title: errorMsg,
     duration: 2500
    })
   }
  }
  return Promise.reject(error)
 }
)
export default service

代码解读:

 

将接口统一放到单独的文件中如我的

引入request.js

第三步,

在页面使用

好了,这就是axios的二次封装

以上就是关于vue中axios的二次封装的全部知识点内容,感谢大家的学习和对脚本之家的支持。

相关文章

  • vue3 process.env.XXX环境变量不生效的解决方法

    vue3 process.env.XXX环境变量不生效的解决方法

    这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue 组件(component)教程之实现精美的日历方法示例

    Vue 组件(component)教程之实现精美的日历方法示例

    组件是我们学习vue必须会的一部分,下面这篇文章主要给大家介绍了关于Vue 组件(component)教程之实现精美的日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • Ant Design Vue 修改表格头部样式的详细代码

    Ant Design Vue 修改表格头部样式的详细代码

    这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API,类型是一个函数,本文通过完整代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • 详解mpvue开发微信小程序基础知识

    详解mpvue开发微信小程序基础知识

    这篇文章主要介绍了详解mpvue开发微信小程序基础知识,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 基于Vue 实现一个中规中矩loading组件

    基于Vue 实现一个中规中矩loading组件

    这篇文章主要介绍了基于Vue 实现一个中规中矩loading组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue elementui 实现搜索栏子组件封装的示例代码

    vue elementui 实现搜索栏子组件封装的示例代码

    这篇文章主要介绍了vue elementui 搜索栏子组件封装,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 基于Vue渲染与插件的加载顺序的问题详解

    基于Vue渲染与插件的加载顺序的问题详解

    下面小编就为大家分享一篇基于Vue渲染与插件的加载顺序的问题详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现左右点击滚动效果

    vue实现左右点击滚动效果

    这篇文章主要为大家详细介绍了vue实现左右点击滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • VUE使用DXFParser组件解析dxf文件生成图片的操作代码

    VUE使用DXFParser组件解析dxf文件生成图片的操作代码

    这篇文章主要介绍了VUE使用DXFParser组件解析dxf文件生成图片的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vue生命周期,文章通过结合案例更加的通俗易懂,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02

最新评论