axios---封装loadding组件的显示和隐藏

需求：希望每一个请求，它在请求的时候都会在界面上显示一个loadding 动画。

一、实现思路：

1.在请求之前先显示一个loadding

2.请求完成之后在把loadding 移除掉

 二、实现步骤：怎么给界面实现loadding：

1.可以使用 element-plus 一个 loadding 组件

2.倒入这个loadding 库

import { ElLoading } from 'element-plus/lib/index' //引入 Loading 服务

3.然后在调用时传入一些对应的参数:（这个应当在添加所有的实例拦截器中添加）

 4.我们可以在这个实例中添加 loading 属性,我们上面的代码是每个请求中都要携带loading 动画，但是有些地方是不需要携带loding动画的，所以我们要在在请求中在添加一个参数，让别人以参数的形式传过来，好让别人决定我们是否要显示这个loading。

所以我们首先要对原来类型做一个扩展，然后在在配置中做个记录。

 4.在请求拦截成功判断这个loading是否显示

  5.在响应拦截里面取消这个loading 动画

6.并且同时也要在resquest 做一个处理

 使用：

 代码改造：

import axios from 'axios'
import type { AxiosInstance } from 'axios' //instance 和 config 类型注解的倒入
import type { JYRequestInterceptors, JYRequestConfig } from './type'
import { ElLoading } from 'element-plus/lib/index' //引入 Loading 服务
import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading' //引入loading 类型
const DEFAULT_LOADING=true
// axios-->axios instance(实例)
class JYRquest {
  instance: AxiosInstance //每次创建出来都用这个实例做一个保存
  interceptors?: JYRequestInterceptors
  showLoading: boolean //来这里记录下每次我们要不要显示这个showLoading
  loading?: LoadingInstance //作用：
 
  //创建一个类的构造器，这个构造器里面传入类的最基本的配置
  constructor(config: JYRequestConfig) {
    //axios里面有个create函数，它可以创建出来我们的实例
    this.instance = axios.create(config)
    this.showLoading = config.showLoading ?? DEFAULT_LOADING
    this.interceptors = config.interceptors
    //3.从config 中取出的拦截器是对应的实例的拦截器
    this.instance.interceptors.request.use(
      this.interceptors?.requestinterceptor,
      this.interceptors?.requestinterceptorCatch
    )
    //4.响应拦截器
    this.instance.interceptors.response.use(
      this.interceptors?.responseinterceptor,
      this.interceptors?.responseinterceptorCatch
    )
    //我们可以继续添加所有的实例都有的拦截器
    this.instance.interceptors.request.use(
      (config) => {
        // 判断要不要显示loading ,需要的情况下菜显示
        if (this.showLoading) {
          this.loading = ElLoading.service({
            lock: true,
            text: '正在请求数据...',
            background: 'rgba(0,0,0,0.5)'
          })
        }
        console.log('在我们所有的实例都有的拦截器')
        return config
      },
      (err) => {
        return err
      }
    )
    this.instance.interceptors.response.use(
      (res) => {
        // 将loading 移除
          this.loading?.close()
        const data = res.data
        if (data.returnCode === '-1001') {
          console.log('请求失败，错误信息')
        }
        return res.data
      },
      (err) => {
        this.loading?.close()
        return err
      }
    )
  }
  //封装一个request 函数
  //注意:这里让别人传config 的时候，不能传默认的了, 因为默认的话它不能传入任何的拦截器，所以这里可以传
  //这个JYRequestConfig 是继承制 AxiosRequestConfig 的
  request(config: JYRequestConfig): void {
    //判断里面是否有requestinterceptor 这个函数
    //1.单个请求对请求config 的处理
    if (config.interceptors?.requestinterceptor) {
      //如果有这个函数，就将 config =config.interceptors.requestinterceptor(然后将config传进来)
      //如果这里真的有这个函数，就执行这个函数
      /**
       requestinterceptor 这个函数的目的就是对（config）,
       做一个转化，转化完之后，还会把默认的config 返回回来，然后再用一个config做一个接收
       */
      config = config.interceptors.requestinterceptor(config)
    }
    // 2.判断是否需要显示loading , 这个值为false 的时候在执行这里面的函数,
    if(config.showLoading===false){
      this.showLoading=config.showLoading
    }
    this.instance.request(config).then((res) => {
      //1.单个请求对数据的处理
      if (config.interceptors?.responseinterceptor) {
        res = config.interceptors.responseinterceptor(res)
      }
      //2.每次请求完成之后设置回初始值,这样就不会影响下一个请求
     this.showLoading=DEFAULT_LOADING
    })
     .catch((err)=>{
      this.showLoading=DEFAULT_LOADING
       return err
     })
  }
}
export default JYRquest