- 目录结构
- config.js文件配置
const defaultConfig = {
apiHost: '地址',
staticHost: ''
}
const previewConfig = {
apiHost: '地址',
staticHost: ''
}
const localConfig = {
apiHost: '地址',
staticHost: ''
}
let hostConfig = defaultConfig
if (process.env.NODE_ENV === 'development') hostConfig = localConfig
export default hostConfig.apiHost
import axios from 'axios'
import baseUrl from './config'
import qs from 'qs'
import {
Message } from 'element-ui'
const instance = axios.create({
baseURL: baseUrl,
timeout: 30000,
transformRequest: [
function (data, headers) {
return data
}
],
transformResponse: [
function (data) {
return data
}
]
})
instance.interceptors.request.use(
(config) => {
if (!config.data) {
config.data = {
}
}
config.data = qs.stringify(config.data)
return config
},
(error) => {
return Promise.reject(error)
}
)
instance.interceptors.response.use(
(response) => {
const resContent = JSON.parse(response.data)
const {
code, msg, data } = resContent
switch (code) {
case 0:
Message.error({
message: msg,
time: 5 * 1000
})
return Promise.reject(msg)
}
if (code == 1 && msg) {
Message.success({
message: msg,
time: 5 * 1000
})
}
return data
},
(error) => {
return Promise.reject(error)
}
)
function createAPI(url, method, data, $this, cancel) {
let config = {
}
if (method === 'post' || method === 'POST') {
config = {
method: 'post',
url,
data
}
} else {
config = {
method: 'post',
url,
params: data
}
}
return instance(config)
}
export default createAPI
import LOGIN from './module/login'
import ACCOUNT from './module/account'
const apis = {
...LOGIN,
...ACCOUNT,
}
export default apis
import createAPI from '../fetch.js'
const LOGIN = {
loginByUsername: (data, $this, cancel) => createAPI('/account/loginByAccount', 'post', data, $this, cancel),
loginByPhone: (data, $this, cancel) => createAPI('/account/loginByPhone', 'post', data, $this, cancel)
export default LOGIN
import apis from '@/apis'
Vue.prototype.$apis = apis
const userinfo = {
}
this.$apis.loginByUsername(userinfo).then(res => {
}