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

2022-01-04 15:59:22 阅读：408 来源： 互联网

标签：case loading vue break axios params error message config

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.调用

(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效果

入图:

接口报错提示入图:

标签：case,loading,vue,break,axios,params,error,message,config
来源： https://blog.csdn.net/Betrayer_hobby/article/details/122304239

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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