vue中使用element的loading组件对axios进行加载提示与错误提示封装处理

如果是看具体逻辑的老铁 直接看第三步
一、首先说这样封装的好处
1、不必每次请求都调用loading加载提示，减少代码冗余
2、对错误进行统一处理，提高代码可维护性

实现的加载效果如图所示

二、准备工作
必须要在项目中安装axios、element
安装命令 npm install axios npm i element-ui -S
注意要在main.js的入口文件中安装element的组件如下

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

1、在项目的src文件夹下新建utils、api这两个文件夹
2、在utils文件夹中新建文件名为request 的 js 文件
3、在api文件夹中新建文件名为index 的 js 文件

三、代码如下
1、request.js中的代码

import axios from 'axios'; 
import {
      Loading,Message } from 'element-ui'
const loading={
      //loading加载对象
  loadingInstance: null,
  //打开加载
  open(){
     
    if(this.loadingInstance===null){
      // 如果实例 为空，则创建
      this.loadingInstance=Loading.service({
     
        text:'加载中...', //加载图标下的文字
        spinner: 'el-icon-loading', //加载图标
        background:'rgba(0, 0, 0, 0.8)', //背景色
        customClass:'loading' //自定义样式的类名
      })
    }
  },
  //关闭加载
  close(){
     
    // 不为空时, 则关闭加载窗口
    if(this.loadingInstance !== null) {
     
      this.loadingInstance.close()
    }
    this.loadingInstance = null
  }
}
// axios的封装
const request =axios.create({
     
  baseURL:'/api',//接口地址前缀 我这里做了代理处理的 根据自己项目来改
  timeout: 5000,
})
//请求拦截器
request.interceptors.request.use(config=>{
     
  loading.open() //打开加载窗口
  //一定要将config return 出去
  return config
})

//响应拦截器
request.interceptors.response.use(response=>{
     
  loading.clone() //关闭加载窗口
  console.log(response) //建议打印一下 有些后台返回回来的数据格式不同  可根据自己的数据格式进行调整

  //错误提示
  if(response.status===500){
     
    Message({
       //elemen组件库中的提示组件
      message:'后台错误',
      type:'error',
      duration:5000
    })
    return Promise.reject() //要返回一个promise对象出去
  }
  if(response.status===404){
     
    Message({
       
      message:'接口地址错误',
      type:'error',
      duration:5000
    })
    return Promise.reject()
  }
  
  //成功的返回
  if(response.status===200){
      //状态码
    return response.data.data //将data中需要的数据返回  可根据自己项目中的数据格式进行调整
  }  
})
export default request //导出出去

2、api 文件夹下的index.js代码

import request from '../utils/request'; 引入
export default {
     
  getlist(author='',keyword=''){
     
    return request({
     
      url:'/api/blog/list',
      method:'get',
      data:{
     
        author,
        keyword
      }
    })
  }
}

3、具体页面调用

<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="12" v-for="item in list" :key="item.id">
        <div class="grid-content bg-purple">
         标题： {
     {
     item.title}}
        </div>
        <div>内容： {
     {
     item.content}}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../api/index';
export default {
     
  name: 'Home',
  data(){
     
    return{
     
      list:[]
    }
  },
  created(){
     
    this.getlist()
  },
  methods:{
     
    getlist(){
     
      api.getlist().then(res=>{
     
        console.log(res,'列表')
        this.list=res
      })
    }
  }
}
</script>

<style lang="scss">
  .home{
     
    width: 1200px;
    margin: 0 auto;
    height:100%;
  }
</style>

结束啦