安装axios
npm install axios --save
封装axios
// 引入axios 和 qs
import axios from "axios";
import qs from "qs";
// 引入路由
import router from "../router";
// 引入弹框组件
import { Message } from "element-ui";
// 引入local
import local from "@/utils/local";
// 统一配置
axios.defaults.baseURL = "http://127.0.0.1:5000";
axios.defaults.timeouts = 5000;//响应时间
// 请求拦截器(在每一个请求头部添加token)
axios.interceptors.request.use(config => {
// 请求头携带token(local是封装的本地存储方法)
config.headers.Authorization = `Bearer ` + local.get("t_k");
// config.headers.Authorization = local.get("t_k");
return config;
});
// 响应拦截器(拦截每一次相应判断并弹出返回的msg且判断登录是否过期)
axios.interceptors.response.use(
res => {
if (res) {
// 如果响应的数据含有code字段和msg字段
if (
res.data !== undefined &&
res.data.code !== undefined &&
res.data.msg !== undefined
) {
// 解构出来
let { code, msg } = res.data;
// 如果成功 弹出成功提示
if (code === 0) {
Message({
type: "success",
message: msg
});
} else if (code === 1) {
Message.error(msg); // 失败 弹出失败提示
}
}
return res;
}
},
err => {
if (err.response.data.code === 401) {
Message.error("无效的token,请重新登录");
// 错误跳转到登录页
router.push("/login");
}
}
);
// 暴露
export default {
get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params
})
.then(res => {
if (res) {
resolve(res.data); // 成功
}
})
.catch(err => {
reject(err); //失败
});
});
},
post(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.post(url, qs.stringify(params))
.then(res => {
if (res) {
resolve(res.data); // 成功
}
})
.catch(err => {
reject(err); // 失败
});
});
}
};
三层封装
//引入封装好的axios
import req from "@/utils/request";
/*
@params 传入的参数
@return 抓取
*/
export const addAcc = (params) => {return req.post("/users/accountadd", params)};
页面中使用
//引入
import { addAcc } from "../../api/shop.js";
//在方法中使用
addAcc.then(res=>{
console.log(res)
})