axios 拦截器使用方法

新创建一个文件夹例如utils，创建request文件里面写下如下代码

import axios from 'axios';

//1. 创建axios对象
const service = axios.create(
    {
        baseURL:'你的接口跟路径',
        timeout:5000

    }
);

//2. 请求拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
  //判断code码
  return response.data;
},error => {
  return Promise.reject(error);
});

export default service;

再utils里创建一个文件夹例如api，在api文件夹内创建文件，代码如下

import request from '@/utils/request'

export function getSliders(){
	return request({
		url:'/swiper'//你的接口
	})
}

在项目中直接引入此函数即可调用接口

vue使用axios拦截器自带loading

新创建文件夹

引入如下代码：

import axios from 'axios';
import { Message,Loading } from 'element-ui';
import _ from 'lodash';
  
const http = axios.create({
    baseURL:"", 
    timeout:40000 //超时时长
});
//loading对象
let loading;
  
//当前正在请求的数量
let needLoadingRequestCount = 0;
  
//显示loading
function showLoading() {
  // 后面这个判断很重要，因为关闭时加了抖动，此时loading对象可能还存在，
  // 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
  if (needLoadingRequestCount === 0 && !loading) {
    loading = Loading.service({
      lock: true,
      text: "Loading...",
      background: 'rgba(255, 255, 255, 0.5)',
     //   target: target || "body"
    });
  }
  needLoadingRequestCount++;
}
  
//隐藏loading
function hideLoading() {
  needLoadingRequestCount--;
  needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); //做个保护
  if (needLoadingRequestCount === 0) {
    //关闭loading
    toHideLoading();
  }
}
  
//防抖：将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时， loading闪烁的问题。
var toHideLoading = _.debounce(()=>{
      loading.close();
      loading = null;
    }, 300);
  
//添加请求拦截器
let configs
http.interceptors.request.use(config => {
    configs=config
  //判断当前请求是否设置了不显示Loading
  if(config.headers.showLoading !== false){
    showLoading(config.headers.loadingTarget);
  }
  return config;
}, error => {
  //判断当前请求是否设置了不显示Loading
  if(configs.headers.showLoading !== false){
    hideLoading();
  }
  Message.error('请求超时!');
  return Promise.resolve(error);
});
  
//响应拦截器
http.interceptors.response.use(
    response => {
      //判断当前请求是否设置了不显示Loading（不显示自然无需隐藏）
      if(response.config.headers.showLoading !== false){
        hideLoading();
      }
      return response;
    },
    error => {
      //判断当前请求是否设置了不显示Loading（不显示自然无需隐藏）
      if(error.response && error.response.config.headers.showLoading !== false){
        hideLoading();
      }
      if(error.response && error.response.data && error.response.data.message) {
        var jsonObj = JSON.parse(error.response.data.message);
        Message.error(jsonObj.message);
      }else{
        Message.error(error.message);
      }
      return Promise.reject(error);
    }
);

export default http;

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import http from '@/api/index' //引入封装的axios
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.prototype.axios = http;//定义成原型属性方便使用
new Vue({
  render: h => h(App),
}).$mount('#app')

如果使用的话 直接

this.axios('/v1/topics').then(res=>{

 console.log(res.data);

 })

vue使用axios拦截器带进度条

npm install  nprogress

新建文件夹

// 对axios的二次封装
import axios from "axios";
//引入进度条
import nProgress from "nprogress";
//引入进度条样式
import "nprogress/nprogress.css";
//利用axios的、对象的create方法，去创建一个实例
const http = axios.create({
  //基础路径
  baseURL: "api",
  timeout: 5000,
});
//请求拦截器
http.interceptors.request.use((config) => {
  //进度条开始
  nProgress.start();
  return config;
});
//响应拦截器
http.interceptors.response.use(
  (res) => {
    //成功回调
    //进度条结束
    nProgress.done();
    return res.data;
  },
  (err) => {
    //失败回调 --终止promise链
    return Promise.reject(new Error("faill"));
  }
);

export default http;

如果需要模块化引入

新建文件

import http from '@/api/index2'
export const reqCateGroyList = () => {
    //发请求
    return http({
      url: "/v1/topics",
      method: "get",
    });
  };
  

使用 ：

 import {reqCateGroyList} from '@/api/request'

  let request=await reqCateGroyList()