vue中axios封装,对浏览器状态码进行弹窗提醒,并配置接口请求时的loading动画；

1.serviceLoading.js loading组件封装:

import { Loading } from 'element-ui'

let loading
function startLoading() {
  loading = Loading.service({
    fullscreen: true ,
    lock: true,
    text: '加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.5)'
  })
}

function endLoading() {
  loading.close()
}

//那么 showFullScreenLoading() tryHideFullScreenLoading() 就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
let needLoadingRequestCount = 0
const showFullScreenLoading = function () {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

const tryHideFullScreenLoading = function () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

export {
  startLoading,
  endLoading,
  showFullScreenLoading,
  tryHideFullScreenLoading
}

2.request.js 组件封装

import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message } from 'element-ui';
import { showFullScreenLoading, tryHideFullScreenLoading } from '@/api/serviceLoading'
//1. 创建新的axios实例，
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 3000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等
  if (config.headers.isLoading !== false) {
    // 如果配置了isLoading: false，则不显示loading
    showFullScreenLoading()
  }
  config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
  config.headers = {
    'Content-Type': 'application/x-www-form-urlencoded' //配置请求头
  }
  const token = ''//配置token

  if (token) {
    // config.params = { 'token': token } //如果要求携带在参数中
    // config.headers.token = token; //如果要求携带在请求头中
    config.headers.accessToken = token; //如果要求携带accessToken
  }
  return config
}, error => {
  tryHideFullScreenLoading()
  Message.error({
    message: '加载超时'
  })
  return Promise.reject(error)
})

// 3.响应拦截器

//   一个错误网址请求对应一个Message弹窗.

service.interceptors.response.use(response => {
  //接收到响应数据并成功后的一些共有的处理，关闭loading等
  tryHideFullScreenLoading()
  return response
}, error => {
  /***** 接收到异常响应的处理开始 *****/
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求(400)'
        break;
      case 401:
        error.message = '未授权，请重新登录(401)'
        break;
      case 403:
        error.message = '拒绝访问(403)'
        break;
      case 404:
        error.message = '请求网址域名错误,未找到该网页资源(404 not found)'
        // window.location.href = "/NotFound"
        break;
      case 405:
        error.message = '请求类型未允许(405 Method not allowed)'
        break;
      case 406:
        error.message = '(请求不接受 406)无法使用请求的内容特性响应请求的网页'
        break;
      case 407:
        error.message = '该IP服务被禁止(407),请开启代理授权'
        break;
      case 408:
        error.message = '请求超时(408)'
        break;
      case 409:
        error.message = '(服务器冲突 409) 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息'
        break;
      case 410:
        error.message = '（服务器资源不存在 410）请求的资源已永久删除'
        break;
      case 411:
        error.message = '(需要有效长度 411） 服务器不接受不含有效内容长度标头字段的请求'
        break;
      case 412:
        error.message = '(未满足前提条件 412） 服务器未满足请求者在请求中设置的其中一个前提条件'
        break;
      case 413:
        error.message = '（请求实体过大 413） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力'
        break;
      case 414:
        error.message = '（请求的URI过长 414） 请求的URI过长，服务器无法处理。'
        break;
      case 415:
        error.message = '（不支持的媒体类型 415） 请求的格式不受请求页面的支持'
        break;
      case 416:
        error.message = '（请求范围不符合要求 416） 如果页面无法提供请求的范围，则服务器会返回此状态代码'
        break;
      case 417:
        error.message = '（未满足期望值 417） 服务器未满足”期望”请求标头字段的要求'
        break;
      case 500:
        error.message = '服务器端出错(500)'
        break;
      case 501:
        error.message = '服务器不具备完成请求的功能(501)'
        break;
      case 502:
        error.message = '网络错误,服务器端无响应(502)'
        break;
      case 503:
        error.message = '服务不可用(503)'
        break;
      case 504:
        error.message = '网关超时(504)'
        break;
      case 505:
        error.message = '（HTTP版本不受支持 505)服务器不支持请求中所用的HTTP协议版本'
        break;
      default:
        error.message = `连接错误${error.response.status}`
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      Message.error('服务器响应超时，请刷新当前页')
    }
    error.message = '连接服务器失败'
  }

  Message.error(error.message)
  /***** 处理结束 *****/
  tryHideFullScreenLoading();
  return Promise.resolve(error.response)
})
//4.导入文件
export default service

3.http.js 封装

import request from './request'

const http = {
  /**
   * methods: 请求
   * @param url 请求地址 
   * @param params 请求参数
   */
  get(url, params) {
    const config = {
      method: 'get',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  post(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  put(url, params) {
    const config = {
      method: 'put',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  delete(url, params) {
    const config = {
      method: 'delete',
      url: url
    }
    if (params) config.params = params
    return request(config)
  }
}
//导出
export default http

4.api.js 封装

import http from './http'
// import {
//   startLoading,
//   endLoading,
// } from '@/api/serviceLoading'
// 
/**
 * 
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
//配置生产环境和开发环境的前缀域名
let request = process.env.NODE_ENV === 'development' ? '' : 'http://localhost:8080'
export default {
  alarmLevelList(params) {
    return http.get(`${request}/geologicHazardWarn/queryNumList`, params)
  },
  naturePlanData(params) {
    return http.get(`${request}/natural/planlist`, params)
  }
}

5.调用

全局挂载:main.js引入

import axios from 'axios'

import axios from 'axios'
Vue.prototype.$axios = axios
import api from '../src/api/api'
Vue.prototype.$api = api;

全局调用方法:this.$api.方法名().then(res=>{

})

(1)import api from '@/api/api' 引入api

(2)

调用方法一

  api.naturalDisastersData().then(res=>{

      console.log(res);

    })

调用方法二:async await 调用

created()/mounted(){

this.aa()

}

methods:{

  async aa() {

      let params = {

        orgCode: 330881003,

        pageNo: this.currentPage ? this.currentPage : 1,

        pageSize: 11,

        name: ''

      }

      let res = await api.naturePlanData(params)

      this.list = res.data.data.rows

    },

}

6.效果:spa页面只有一个接口效果不明显,需要2个及以上接口出现loading效果

入图:

接口报错提示入图: