vue封装axios(用interceptors封装)

简介: vue封装axios(用interceptors封装)
import Axios from 'axios';
import { Message } from 'element-ui'
 
let token = sessionStorage.getItem('token')
 
const axios = Axios.create({
  baseURL: '',
  timeout: 150000, // request timeout
  headers: {
    'Authorization': token
  },
  method: 'GET'
});
 
let showMsg = true;
 
axios.interceptors.request.use(
  (req) => {
    if(!token) {
      req.headers.token = sessionStorage.getItem('token');
      return req;
    }
  },
  (err) => {
    Message.error('请求中错误'+ err)
    return Promise.reject(err);
  }
)
 
axios.interceptors.response.use(
  (res) => {
    if(res.status == 200) {
      if(res.data.code != 0) {
        if(showMsg) {
          Message.error('响应错误'+ res.data.msg)
        }
        showMsg = false;
        setTimeout(() => {
           showMsg = true;
        }, 3000)
      }
    }
    return res.data
  },
  (err) => {
     Message.error('错误' + err)
    return Promise.reject(err)
  }
)
 
export default axios;
目录
相关文章
|
2月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
85 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
2月前
|
资源调度 JavaScript
|
2月前
|
缓存 JavaScript 搜索推荐
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
108 4
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
130 1
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
152 1
|
2月前
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
79 0
|
4月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
4月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。