二次封装axios，请求加载进度条_axios ts封装 支持进度

一、利用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