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;
目录
相关文章
|
5天前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
10 1
|
13天前
|
JavaScript
vue对axios封装
vue对axios封装
17 2
|
13天前
|
存储 JSON 自然语言处理
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
15 2
|
3天前
|
前端开发
网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
|
5天前
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
11 0
|
13天前
|
JavaScript 前端开发 Java
vue使用axios与springboot通讯
vue使用axios与springboot通讯
13 0
|
2月前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
2月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
267 0
|
2月前
|
XML JavaScript 前端开发
axios如何在vue中使用
axios如何在vue中使用
40 1
|
2月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。