vue 拦截器封装

这里用的elementUI

import axios from 'axios';
import qs from 'qs';
import { Message } from 'element-ui';
import router from 'vue-router';

import {baseURL} from "./fetch"
axios.defaults.timeout = 30000;
axios.defaults.baseURL = baseURL;
// http request 拦截器
// axios.interceptors.request.use(
//   config => {
//     if (config.method === 'get') {
//       if (config.url.indexOf('?') > 0) {
//         config.url = config.url + '&' + qs.stringify(config.data);
//       } else {
//         config.url = config.url + '?' + qs.stringify(config.data);
//       }
//     }
//     return config;
//   },
//   error => {
//     return Promise.reject(error);
//   }
// );

// http response 拦截器
axios.interceptors.response.use(
  response => {
    console.log("response",response)
    if (+response.data.code !== 200) {
      Message({ type: 'error', message: response.data.message });
    }
    return response;
  },
  error => {
    console.log("error",error.response) //错误响应

    if (error.response.data === 5000) {
      Message({ type: 'error', message: '登录已失效,请重新登录' });
      removeCookie('access_token');
      window.localStorage.removeItem('menuItem');
      router.push({
        path: '/login',
        querry: { redirect: router.currentRoute.fullPath } // 从哪个页面跳转
      });
    }
    Message({ type: 'error', message: error.response.data.message });
    return Promise.reject(error);
  }
);

export default axios

在main.js 中

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from "element-ui";
import  axios from './constants/http';

Vue.config.productionTip = false;

Vue.prototype.$axios = axios;

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

Vue 3中使用axios进行拦截器封装方法如下: 首先,安装axios和@vue/composition-api依赖包: ``` npm install axios @vue/composition-api ``` 然后,在你的项目中创建一个axios.js文件,用于封装axios和拦截器逻辑: ```javascript import axios from 'axios'; import { ref } from '@vue/composition-api'; const instance = axios.create({ baseURL: 'https://api.example.com' // 设置请求的基础URL }); // 创建一个ref类型的变量,用于存储当前正在进行的请求数量 const loadingCount = ref(0); // 请求拦截器 instance.interceptors.request.use( config => { // 在请求发送之前,对config进行一些处理,比如添加token等 loadingCount.value++; return config; }, error => { return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( response => { // 在响应数据返回之前,对response进行一些处理,比如统一错误处理等 loadingCount.value--; return response; }, error => { loadingCount.value--; return Promise.reject(error); } ); export default instance; ``` 接下来,在你的组件中使用该封装好的axios实例: ```javascript import axios from '@/axios'; export default { setup() { // 发起一个请求示例 const fetchData = async () => { try { const response = await axios.get('/data'); console.log(response.data); } catch (error) { console.error(error); } }; return { fetchData }; } }; ``` 这样,你就成功在Vue 3中封装了axios拦截器。在请求发起前和响应返回后的拦截器中,你可以根据需要做一些通用的处理,比如添加认证信息、统一错误处理等。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值