二次封装axios，请求加载进度条

一、利用npm 官网的nprogress

// axios 的二次封装
import axios from 'axios'
//下面可以是任意插件 我们以进度条为例 二次封装一个请求过程中自动出现进度条的案例
import Nprogress from 'nprogress'
import "nprogress/nprogress.css"

// 刚刚发起请求的时候先拦截一下
// 必须在拦截器中return config
axios.interceptors.request.use((config) => {
	//进度条开启
    Nprogress.start()
    // config 是请求前配置的内容
    return config
})

// 响应结果后拦截一下
axios.interceptors.response.use((data) => {
	//进度条关闭
    Nprogress.done()
    //data 是返回的请求结果 如果自定义输入 请求返回就为自定义值
    return data
})

export default axios

二、使用element ui 的loading 组件，添加请求接口的loading 效果  vue2

.安装element-ui; 打开官网 ： https://element.eleme.cn/2.13/#/zh-CN/component/installation

 安装 npm i element-ui -S  按需引入 npm install babel-plugin-component -D

按照官网步骤来

  项目的根目录下面添加.balelrc文件，在文件内添加下面的代码

  {

  "plugins":[

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

import axios from "axios";
import { Loading } from 'element-ui';
import router from '../router/index.js'
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
  });

  let loadingInstance =null;
  // 添加请求拦截器
  instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    loadingInstance = Loading.service({
        text:'正在加载中。。。。。'
    });
  const token=localStorage.getItem('token');
  if(token){
    config.headers.Authorization='Bearer '+token;
  }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么?
    loadingInstance?.close();
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    loadingInstance?.close();
    const status=error.response.status;
    if(status==404){
    router.push('/qwer',()=>{},()=>{});
      return error.response
    }
    if(status==401){
      alert('token已失效或者是token被篡改了')
      router.push('/login',()=>{},()=>{});
      return error.response;
    }
    return Promise.reject(error);
  });
  export default instance

三、在vue3中，咱们使用的是element-plus组件库

1、下载安装组件库，并在组件库中找到loadding这个组件

 npm install element-plus --save

2、在封装的axios中引入,并结合axios使用

import axios from 'axios';
import { ElLoading } from 'element-plus'

const loadingInstance = () => {
    const options = {
        lock: true,           //
        text: "加载中。。。。",  //加载图标下方的加载文案
        background: 'rgba(0,0,0,0.7)'  //遮罩背景色
    }
    ElLoading.service(options)
}
const endLoading = () => {
    loadingInstance.close()
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //开始加载
    loadingInstance()
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //关闭loading
    endLoading()
    return response;
  }, function (error) {
    // 对响应错误做点什么
    //关闭loading 
    endLoading()
    return Promise.reject(error);
  });


export default  axios

四、当有多个请求，如何关闭loading效果；

import axios from 'axios';

// 创建 Loading 状态管理对象
const loadingStates = {
  loading1: false,
  loading2: false,
  // 可以根据需要添加更多的 loading 状态
};

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 添加请求拦截器，在发送请求之前显示对应的 loading
instance.interceptors.request.use(config => {
  // 根据请求的特征决定显示哪个 loading
  if (config.url.includes('/endpoint1')) {
    loadingStates.loading1 = true;
  } else if (config.url.includes('/endpoint2')) {
    loadingStates.loading2 = true;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器，在请求完成后隐藏对应的 loading
instance.interceptors.response.use(response => {
  // 根据响应的特征决定隐藏哪个 loading
  if (response.config.url.includes('/endpoint1')) {
    loadingStates.loading1 = false;
  } else if (response.config.url.includes('/endpoint2')) {
    loadingStates.loading2 = false;
  }
  return response;
}, error => {
  // 在请求出错时也要隐藏 loading
  loadingStates.loading1 = false;
  loadingStates.loading2 = false;
  return Promise.reject(error);
});

// 导出封装后的 Axios 实例
export default instance;

四、当有多个网络请求时，如何处理loading效果

import { ElLoading } from 'element-plus';

let loadingCount = 0;
let loadingInstance;
const showLoading = (target) => {
    if (loadingCount === 0) {
        loadingInstance = ElLoading.service({ target });
    }
    loadingCount++;
}
const hideLoading = () => {
    if (loadingCount <= 0) return
    loadingCount--
    if (loadingCount === 0) {
        loadingInstance.close()
    }
}

export {
    showLoading,
    hideLoading
}

//导入axios
import axios from 'axios';
//导入loading加载效果
import { showLoading, hideLoading } from './loading.js';
import { ElMessage } from 'element-plus'
//创建实例
const instance = axios.create({
  timeout: 2000,
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  //打开loading效果
  showLoading()
  //断网提示
  if (!navigator.onLine) {
    ElMessage({
      message: '你的网络出现了故障！',
      type: 'warning',
    })
  }
  // 在发送请求之前做些什么
  let token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = 'Beaeer ' + token;
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {

  setTimeout(() => {
    hideLoading()
  }, 1000)

  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  let code = error.response.status;
  switch (code) {
    case 400:
      console.log('语法错误');
      break;
    case 401:
      console.log('未授权');
      localStorage.removeItem('token');
      router.push('/login')
      break;
    case 404:
      console.log('未找到');
      break;
    case 500:
      console.log('服务器错误');
      break;
    case 502:
      console.log('网关错误');
      break;
  }

  return Promise.reject(error);
});

export default instance