首先在utils文件夹里封装请求request.js文件
import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
});
// request interceptor
service.interceptors.request.use(
(config) => {
if (store.getters.token) {
config.headers["X-Token"] = getToken();
}
return config;
},
(error) => {
console.log(error);
return Promise.reject(error);
}
);
service.interceptors.response.use(
(response) => {
const res = response.data;
if (Number(res.code) !== 20000) {
Message({
message: res.message || "Error",
type: "error",
duration: 5 * 1000,
});
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm(
"You have been logged out, you can cancel to stay on this page, or log in again",
"Confirm logout",
{
confirmButtonText: "Re-Login",
cancelButtonText: "Cancel",
type: "warning",
}
).then(() => {
store.dispatch("user/resetToken").then(() => {
location.reload();
});
});
}
return Promise.reject(new Error(res.message || "Error"));
} else {
return res;
}
},
(error) => {
console.log("err" + error); // for debug
Message({
message: error.message,
type: "error",
duration: 5 * 1000,
});
return Promise.reject(error);
}
);
export default service;
2.再在apl文件夹里面新建各个页面如login.js里面引入request
import request from '@/utils/request'
//终端状态数量统计
export function queryAssetCount(data){
return request({
url:'后端接口地址',
method:'get',
data,
})
}
这样就可以了,然后找到pages具体页面,在上面引入:
import { queryAssetCount } from "../../api/dashboard";
复制名字在method里面写方法(前面加_区别开来)
_queryAssetCount() {
queryAssetCount().then(res => {
this.allData = res.data;
//console.log(res.data, "res");读到数据说明请求成功
//加入插入echarts图标,再在下面调用
this.$nextTick(() => {
this.initEchars1();
});
//
});
},