接口封装
内容如下
import axios from "axios"
import nprogress from "nprogress"
import {
Message
} from "element-ui"
//运行环境:本地环境:devLpment和线上(生产)环境:production
const isPro = process.env.NODE_ENV === 'production'
const servic = axios.create({
//基础路径
baseURL: isPro ? '线上接口路径' : '/api',
timeout: 100000
})
//请求拦截
servic.interceptors.request.use((config) => {
//请求成功的时候上面的进度条开始
nprogress.start()
//前后端建权(令牌)
let token = localStorage.getItem('admitToken')
if (token) {
config.headers['Authorization'] = token
}
return config
}), err => {
//请求失败的时候
nprogress.done()
return Promise.reject(err)
}
//响应拦截,每一次接口返回路径都会干的事情
servic.interceptors.response.use((res) => {
nprogress.done()
return res.data
}), err => {
//失败的时候
if (err.response && err.response.status) {
//错误请求的状态码
let status = err.response.status
if (status === 400) {
Message.error('参数错误')
}
if (status === 401) {
Message.error('登录过期,请重新登录')
}
if (status === 403) {
Message.error('没有权限')
}
if (status === 404) {
Message.error('接口路径错误')
}
if (status === 500) {
Message.error('服务器出错')
}
if (status === 400) {
Message.error('参数错误')
}
if (status === 503) {
Message.error('服务器在维护')
}
}
}
export default servic
api中
import service from "./index"
import servic from "./index"
import qs from "qs"
//某些接口路径为例
export default {
//登录(post请求)
login({
username,
password
}) {
return service.post('/login', {
username,
password
})
},
//用户数据列表(get请求)
getUsers(
query, //查询参数
pagenum, //当前页码
pagesize //每页显示条数
) {
return service.get(`users?query=${query}&pagenum=${pagenum}&pagesize=${pagesize}`)
},
//删除用户(delete请求 请求路径:users/:id)当出现携带在url中以一下方式传参
delUser(
id
) {
return service.delete(`users/${id}`)
},
//编辑用户提交(put请求 id为出现携带在url中,email,mobile为正常参数)
submitInfo(id,
email,
mobile
) {
return service.put(`users/${id}`, {
email,
mobile
})
},
//参数列表(id为携带在路径中,sel为正常参数)
getcategories(id, sel) {
return service.get(`categories/${id}/attributes?sel=${sel}`)
},
//角色授权(特殊情况,需要用到qs插件)
setRoles({
roleId,
rids
}) {
return service.post(`roles/${roleId}/rights`, qs.stringify({
rids
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
});
},
}
附
vue.config.js. 提取码:1mzf