前段时间太忙(还是自己太懒了),好久没写博客了,把最近的博客补上,今天聊聊vue接口的统一管理。
刚开始做vue项目的时候基本上每个vue页面调用的接口都各自写在各自的页面里面,这样就会有重复的代码比如500,404等判断,这些基本的代码都可以抽象出来。
第一步 抽象出来request文件
import axios from 'axios'
import { Message, Loading } from 'element-ui'
let loadinginstace
let baseUrlTemp = location.origin
if (baseUrlTemp.includes('localhost')) {
baseUrlTemp = '127.0.0.1:9952/api'
}
console.log('页面地址==', baseUrlTemp)
// 创建axios实例
const service = axios.create({
baseURL: 'http://127.0.0.1:9952/api', // api 的 base_url
// timeout: 5000, // 请求超时时间
withCredentials: true
})
// request拦截器
service.interceptors.request.use(
config => {
// if (store.getters.token) {
// config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
// }
loadinginstace = Loading.service({
fullscreen: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0,0,0,0.6)'
})
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
loadinginstace.close()
/**
* code为非200是抛错 可结合自己业务进行修改
*/
if (response.status === 200) {
const res = response.data
if (res.code === '0' || res.code === 0) {
return response.data
} else {
if (res.code === '401' || res.code === 401) {
location.href = '/login'
} else {
res.message &&
Message({
message: res.message,
type: 'error',
duration: 3 * 1000
})
return response.data
}
}
}
},
error => {
loadinginstace.close()
var message = (error.response && error.response.data.message) || ''
switch ((error.response && error.response.status) || 302) {
case 400:
break
case 401:
// message = "登录已超时,请重新登录"
// if (!window.tipLock) {
// window.tipLock = true
// toLogin(error.response.data.loginUrl)
// }
location.href = error.response.data.loginUrl
break
case 403:
message = '未授权请求'
break
case 404:
message = '请求的资源不存在'
break
case 500:
message = '服务器内部错误'
break
case 302:
message = '请重新登录'
// toLogin(error.response.data.loginUrl)
// location.replace(error.response.data.loginUrl)
break
}
Message({
message: message || '未知错误',
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
export default service
第二步根据业务不同抽象出不同的js,以user为例
import request from '@/utils/request'
// 用户列表接口
export function userList (data) {
console.log('用户列表传过来的参数' + JSON.stringify(data))
return request({
url: `/user/list`,
method: 'post',
data
})
}
// 删除用户
export function deleteUser (param) {
console.log('删除用户传过来的参数' + JSON.stringify(param))
return request({
url: `/user/delete/` + param,
method: 'delete'
})
}
export function saveOrUpdate (data) {
console.log('新增或者更新用户传过来的参数' + JSON.stringify(data))
return request({
url: `/user/saveOrUpdate`,
method: 'post',
data
})
}
// 查询用户
export function getUserById (param) {
console.log('查询用户传过来的参数' + JSON.stringify(param))
return request({
url: `/user/` + param,
method: 'get'
})
}
第三步,vue里面调用
首先引入js
import {userList, deleteUser, getUserById} from '../../api/user'
然后在method中调用
listAllUser (pageNum) {
pageNum = pageNum == null ? this.pageNum : pageNum
console.log('---------' + pageNum)
var userSearchDTO = {pageNum: pageNum == null ? this.pageNum : pageNum, pageSize: this.pageSize, name: this.input}
userList(userSearchDTO).then(res => {
// 注意: 通过 $http 获取到的数据,都在 result.body 中放着
let { code, data } = res
if (code === 0) {
// 成功了
this.list = data.list
this.total = data.total
this.pageSize = data.pageSize
this.currentPage = data.pageNum
console.log('用户列表查出来的数据' + JSON.stringify(data))
}
})
},
这样就好了