基于axios封装服务层services
安装相关模块
cnpm i axios babel-polyfill qs -S
import 'babel-polyfill' // 入口文件顶部引入
axios请求封装
import axios from 'axios'
import qs from 'qs'
import Message from 'iview/src/components/message'
import LoadingBar from 'iview/src/components/loading-bar'
import Modal from 'iview/src/components/modal'
import router from '@/router'
// 请求时的拦截器
axios.interceptors.request.use(config => {
LoadingBar.start()
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
}
return config
}, error => {
return Promise.reject(error)
})
// 请求完成后的拦截器
axios.interceptors.response.use(response => {
LoadingBar.finish()
if (response.data.result === NOT_LOGIN) {
localStorage.removeItem('userInfo')
Modal.info({
title: '消息',
content: '登录已失效,请重新登录',
okText: '我知道了',
onOk() {
router.push({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
})
}
})
} else {
return response.data
}
}, error => {
LoadingBar.error()
if (error && error.response) {
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 请求错误,未找到该资源'
break
case 405:
error.message = '405 请求方法未允许'
break
case 408:
error.message = '408 请求超时'
break
case 415:
error.message = '415 请求头 Content-Type 有误'
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 = '505 http版本不支持该请求'
break
default:
error.message = `请求 API 失败, code ${error.response.status}`
}
} else {
error.message = '连接到服务器失败或被重定向'
}
return Promise.reject(error.message)
})
const RES_OK = 1
const NOT_LOGIN = -1
const rootPath = ''
const xhr = ({ method = 'get', url, params = null, type = 'application/x-www-form-urlencoded' }) => {
return new Promise((resolve, reject) => {
if (method === 'get') {
axios.get(rootPath + url, {
params: params
}).then(res => {
if (res.result === RES_OK) {
resolve(res.data)
} else {
Message.warning(res.desc)
}
}).catch(e => {
Message.warning(e)
})
} else if (method === 'post') {
axios.post(rootPath + url, params, {
headers: {
'Content-Type': type
}
}).then(res => {
if (res.result === RES_OK) {
resolve(res.data)
} else {
Message.warning(res.desc)
}
}).catch(e => {
Message.warning(e)
})
} else if (method === 'put') {
axios.put(rootPath + url, params, {
headers: {
'Content-Type': type
}
}).then(res => {
if (res.result === RES_OK) {
resolve(res.data)
} else {
Message.warning(res.desc)
}
}).catch(e => {
Message.warning(e)
})
} else if (method === 'delete') {
axios.delete(rootPath + url, {
params: params
}).then(res => {
if (res.result === RES_OK) {
resolve(res.data)
} else {
Message.warning(res.desc)
}
}).catch(e => {
Message.warning(e)
})
} else {
//
}
})
}
export default xhr
- axios拦截器可根据需求自定义更丰富的功能,此处是增加了查看请求完成情况的进度条及一些状态判断等。
- res返回的code,data,msg,result等参数需要与后台开发人员商议确定写法,此处是统一使用的result, data, desc写法。
调用代码
import xhr from './xhr/axios'
class AccountService {
// 登录
login(data) {
return xhr({
method: 'post',
type: 'application/json',
url: '/api/account/login',
params: data
})
}
// 登出
logout(data) {
return xhr({
method: 'get',
url: '/api/account/logout',
params: data
})
}
}
// 实例化后导出,全局单例
export default new AccountService()
- 接口方法为
post
和put
时,根据后端需求,type可设置为application/json
等,不传默认为application/x-www-form-urlencoded
页面调用
import AccountService from '@/services/accountService'
AccountService.login(this.loginForm).then(data => {
})