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;
目录
相关文章
|
6天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
34 0
|
6天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
6天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
6天前
axios封装和配置
axios封装和配置
21 0
|
6天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
41 0
|
6天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
6天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
6天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
95 0
|
6天前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
31 1
|
6天前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
22 2