结构
模块中各个api文件引用base.js、http.js中的方法
api.js中引用模块中各个api文件,并使用exports导出
base.js
vue代理路由地址
// 接口域名管理
const base = {
apiUrl : 'http://192.100.100.135:1001'
}
export default base
http.js
vue路由处理,axois封装、路由拦截器,使用了element UI中的全局loading方法,不加loading的也有
import Vue from 'vue'
import Axios from 'axios'
import Store from '../store'
import Router from '../router/index'
import { Loading } from 'element-ui'
let v = new Vue()
const goLogin = () => {
sessionStorage.setItem('token', '')
Router.push('/login')
}
let loading = null
function startLoading () { // 使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '数据加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading () { // 使用Element loading-close 方法
loading.close()
}
let needLoadingRequestCount = 0
export function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
function checkCode (response) {
if (!response) {
v.$message({
message: '网络连接断开!',
type: 'error',
duration: 2000
})
}
if (response.code === '0') {
return response
}
if (response.code === '0000000001') {
v.$message({
message: '登录过期!',
type: 'error',
duration: 2000
})
goLogin()
return false
} else {
v.$message({
message: response.message,
type: 'warning',
duration: 2000
})
return false
}
}
const instance = Axios.create({ timeout: 1000 * 20 })
const instance1 = Axios.create({ timeout: 1000 * 20 })
// 请求拦截器
instance.interceptors.request.use(
config => {
config.timeout = 50000
const AUTH_TOKEN = sessionStorage.getItem('token')
config.headers.common['Authorization'] = AUTH_TOKEN
return config
},
error => {
return Promise.reject(error)
}
)
// 不带loading响应拦截器
instance.interceptors.response.use(
response => {
if (
response.data === null &&
response.config.responseType === 'json' &&
response.request.responseText !== null
) {
try {
response.data = JSON.parse(response.request.responseText)
} catch (e) {}
}
return response.data
},
error => {
return Promise.resolve(error.response)
}
)
// 带loading响应
instance1.interceptors.request.use(
config => {
config.timeout = 50000
const AUTH_TOKEN = sessionStorage.getItem('token')
config.headers.common['Authorization'] = AUTH_TOKEN
showFullScreenLoading()
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
instance1.interceptors.response.use(
response => {
if (
response.data === null &&
response.config.responseType === 'json' &&
response.request.responseText !== null
) {
try {
response.data = JSON.parse(response.request.responseText)
} catch (e) {
//
}
}
tryHideFullScreenLoading()
return response.data
},
error => {
tryHideFullScreenLoading()
return Promise.resolve(error.response)
}
)
export const request = function (method, url, data) {
// 暴露 request 给我们好API 管理
method = method.toLocaleLowerCase()
if (method === 'post') {
return instance.post(url, data).then((response) => {
return checkCode(response)
})
} else if (method === 'get') {
// 时间戳
data = {
timestamp: Date.now(),
...data
}
return instance.get(url, {
params: data
}).then((response) => {
return checkCode(response)
})
}
}
// loading
export const request1 = function (method, url, data) {
// 暴露 request 给我们好API 管理
method = method.toLocaleLowerCase()
if (method === 'post') {
return instance1.post(url, data).then((response) => {
return checkCode(response)
})
} else if (method === 'get') {
// 时间戳
data = {
timestamp: Date.now(),
...data
}
return instance1.get(url, {
params: data
}).then((response) => {
return checkCode(response)
})
}
}
API模块接口
request: 接口加载没有loading显示
request1: 接口加载过程中显示loading效果
// 模块接口
import base from '../base'
import { request, request1 } from '../http'
export default {
login: promise => request('post', `${base.apiUrl}/login`, promise),
login1: promise => request1('get', `${base.apiUrl}/login`, promise)
}
使用
api.js记得引入main.js中,并挂载
页面使用
async Func () {
const { data } = await this.$api.模块名称.接口名称()
if (data) {
//接口调取成功后操作
}
}