vue-cli项目中axios接口封装以及api的统一管理
2018-09-10 本文已影响325人
5df463a52098
最近写了一个vue项目，所有的接口做了统一的处理，而且所有的api地址都写在一个文件里，便于修改和整理。
接口请求封装：http.js
import axios from 'axios'
const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间
/*
* @param response 返回数据列表
*/
function handleResults (response) {
let remoteResponse = response.data
var result = {
success: false,
message: '',
status: [],
errorCode: '',
data: {
total: 0,
results: []
}
}
if (remoteResponse.success) {
result.data.results = remoteResponse.data
result.data.total = remoteResponse.total
result.success = true
}
if (!remoteResponse.success) {
let code = remoteResponse.errorCode
if (code === 400) {
console.log('传参错误')
}
result.errorCode = remoteResponse.errorCode
result.message = remoteResponse.message
}
return result
}
function handleUrl (url) {
url = BASE_URL + url
// BASE_URL是接口的ip前缀，比如http:10.100.1.1:8989/
return url
}
/*
* @param data 参数列表
* @return
*/
function handleParams (data) {
return data
}
export default {
/*
* @param url
* @param data
* @param response 请求成功时的回调函数
* @param exception 异常的回调函数
*/
post (url, data, response, exception) {
axios({
method: 'post',
url: handleUrl(url),
data: handleParams(data),
timeout: TIME_OUT_MS,
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
}).then(
(result) => {
response(handleResults(result))
}
).catch(
(error) => {
if (exception) {
exception(error)
} else {
console.log(error)
}
}
)
},
/*
* get 请求
* @param url
* @param response 请求成功时的回调函数
* @param exception 异常的回调函数
*/
get (url, response, exception) {
axios({
method: 'get',
url: handleUrl(url),
timeout: TIME_OUT_MS,
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
}).then(
(result) => {
response(handleResults(result))
}
).catch(
(error) => {
if (exception) {
exception(error)
} else {
console.log(error)
}
}
)
},
/*
* 导入文件
* @param url
* @param data
* @param response 请求成功时的回调函数
* @param exception 异常的回调函数
*/
uploadFile (url, data, response, exception) {
axios({
method: 'post',
url: handleUrl(url),
data: handleParams(data),
dataType: 'json',
processData: false,
contentType: false
}).then(
(result) => {
response(handleResults(result, data))
}
).catch(
(error) => {
if (exception) {
exception(error)
} else {
console.log(error)
}
}
)
},
/*
* 下载文件用，导出 Excel 表格可以用这个方法
* @param url
* @param param
* @param fileName 如果是导出 Excel 表格文件名后缀最好用.xls 而不是.xlsx，否则文件可能会因为格式错误导致无法打开
* @param exception 异常的回调函数
*/
downloadFile (url, data, fileName, exception) {
axios({
method: 'post',
url: handleUrl(url),
data: handleParams(data),
responseType: 'blob'
}).then(
(result) => {
const excelBlob = result.data
if ('msSaveOrOpenBlob' in navigator) {
// Microsoft Edge and Microsoft Internet Explorer 10-11
window.navigator.msSaveOrOpenBlob(excelBlob, fileName)
} else {
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
const blob = new Blob([excelBlob])
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
document.body.removeChild(elink)
}
}
).catch(
(error) => {
if (exception) {
exception(error)
} else {
console.log(error)
}
}
)
},
uploadFileFormData (url, data, response, exception) {
axios({
method: 'post',
url: handleUrl(url),
data: data,
timeout: TIME_OUT_MS,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(
(result) => {
response(handleResults(result))
}
).catch(
(error) => {
if (exception) {
exception(error)
} else {
console.log(error)
}
}
)
}
}
接口api统一封装： ports.js
export default {
manage: {
register: '/manage/company/register', // 注册接口
login: '/manage/company/login', // 登录
logout: '/manage/company/loginOut' // // 退出
},
pwd: {
sendEmail: '/manage/user/sendEmail',
resetPwd: '/manage/user/passwordReset'
}
}
引入和定义方式：main.js中
import http from 'http.js'
import ports from 'ports'
Vue.prototype.http = http
Vue.prototype.ports = ports
使用 方式：组件内
this.http.post(this.ports.manage.login, {
userAccount: 'test',
userPassword: '111111',
cert: '1111111111'
}, res => {
if (res.success) {
// 返回正确的处理
} else {
// 返回错误的处理
}
})
如果后台修改接口名称，我们就可以在ports.js里统一的修改。同时如果接口要做统一的拦截或者处理的话，就可以在http.js 做统一的处理。对于http.js中的接口前缀BASE_URL,定义在配置文件里，
webpack.dev.conf.js中：
image.png
webpack.prod.conf.js中：
image.png
config/index.js中：
image.png
npm run dev启动本地服务，BASE_URL自动匹配的就是/developPublish对应的地址。npm run build编译，接口的统一前缀就是/publishTest，然后就在服务端做nginx 路径代理，把/publishTest代理到正确的请求路径，记住BASE_URL在配置文件里定义时一定要加‘/’，不然可能出现路径匹配不到的情况，可能原因是publishTest不加/就和其他的字母连在一起，服务端就无法匹配路径。
