13 vue项目实战之封装load动画界面调错技巧

small_wh1te_coder

已于 2024-05-26 21:46:33 修改

阅读量164

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-04-19 21:16:47 首次发布

本文链接：https://blog.csdn.net/c5dnuser/article/details/137977760

版权

封装loading界面加载动画，直接根据axios请求中函数加载流程中的config与response两类情况予以处理

class HYRequest {
  constructor(baseURL, timeout = 10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })

    this.instance.interceptors.request.use((config) => {
      mainStore.isLoading = true
      return config
    }, err => {
      return err
    })


    this.instance.interceptors.response.use((res)=>{
      mainStore.isLoading = false
      return res
    }, err => {
      mainStore.isLoading = false
      return err
    })
  }

其中一处引用了store中在modules在mainStore中封装的小组件的问题，

起初找了半个小时无功而返，最后一步步分析，肯定和servise中的拦截器有关，于是果断进入拦截器封装模块，立马定位问题所在>>>