vue封装axios（用interceptors封装）

最新推荐文章于 2024-09-12 21:11:58 发布

Y2000104

最新推荐文章于 2024-09-12 21:11:58 发布

阅读量177

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/y2000104/article/details/137171288

版权

文章介绍了如何在Element-UI框架中使用axios库创建一个带有自动token验证和错误提示的HTTP请求实例，包括请求和响应拦截器的配置。

摘要由CSDN通过智能技术生成

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;