1.配置URL
(1)创建一个js文件
(2)区别测试环境和生产环境(正式环境)
let host;
if (process.env.NODE_ENV == 'development') {
host = "xx.xx.xx.xx";
}else if (process.env.NODE_ENV == 'production') {
host = "xx.xx.xx.xx"; //线上接口(生产环境包)
}
export const BASEURL = `http://${host}:端口号`;
2.封装接口
(1)创建network文件夹及base.js文件, network文件夹里全部放接口文件 ,在每个接口文件中引用base.js文件
(2)在base.js中封装
import axios from 'axios'
import { BASEURL } from '@/contant.js'
const instance1 = axios.create({
baseURL: BASEURL
})
export default function request(config) {
instance1.interceptors.request.use(config => {
let token = window.localStorage.getItem("authToken");
token && (config.headers.Authorization = token);
return config
},error => {
return Promise.error(error);
}
)
instance1.interceptors.response.use(result => {
if (result.status === 200) {
if (result.data.code == -1004) { //登录过期
window.location.replace('/');
localStorage.removeItem('authToken')
}else if(result.data.code == -1005) { //用户未登录
window.location.replace('/')
localStorage.removeItem('authToken')
}else if(result.data.code == -1006){ //当前用户无权限
// return Promise.resolve(result.data.message);
}
return Promise.resolve(result);
}else {
return Promise.reject(result);
}
})
return instance1(config)
}
(3)新建一个接口文件position.js , 现在每个接口文件中可直接引用base.js中的request
import request from '@/network/base.js'
function list() {
return request({
method: "GET",
url: "/api/list"
})
}
function changePosition(config) {
return request({
method: "POST",
url: "api/changePosition",
data: config
})
}
export default {
list: list,
changePosition:changePosition
}
3.在vue文件中使用
(1)引用
(2)使用
loadData() {
position.list().then((res)=>{
if (res.data.code === 200) {
this.tableData = res.data.data;
}else{
this.$message.warning(res.data.message);
}
}).catch((err=>{
console.log(err)
}))
},