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 service3.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 http4.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效果
入图:
接口报错提示入图: