axios & fetch 异步请求

// 一、创建实例
const request = axios.create({
baseURL: "http://kg.zhaodashen.cn/v2",
headers: {
// token:
// localStorage.getItem("token") || "adf7cbdcdc62b07d94f86339e5687ca51",
"content-type": "application/x-www-form-urlencoded",
},
timeout: 5000,
});

// 二、拦截器
// 语法：axios/request.interceptors.request/response.use(callback, callback)
// 作用：拦截用户每次的请求和相应数据 来过滤
// 请求：点击按钮 -> 触发methods -> 发送异步请求 -> 拦截（ Loading、token、CancelToken等 -> 发送
// 响应：后端返回数据 -> 拦截（关闭Loading、 接口权限、TOKEN过期、res.data.data过滤 -> 异步请求then -> 结束
// 强调：异步请求then拿到什么数据 取决于相应拦截器返回的结果
let loadingInstance = null;
let ajax = {};
request.interceptors.request.use(
(config) => {
// console.log(config);

// 全局遮罩Loading
// loadingInstance = ELEMENT.Loading.service();

// token
config.headers["token"] =
localStorage.getItem("token") || "adf7cbdcdc62b07d94f86339e5687ca51";

//取消重复请求
if (ajax[config.url]) {
ajax[config.url].cancel("用户取消了请求");
// delete ajax[config.url]
}
ajax[config.url] = axios.CancelToken.source();
config.cancelToken = ajax[config.url].token;

return config;
},
(err) => {
return Promise.reject(err);
}
);

request.interceptors.response.use(
(response) => {
// 关闭全局Loading
loadingInstance.close();

console.log(response);

return response.data;
},
(error) => {
// 失败响应
let errorObj = JSON.parse(JSON.stringify(error));

// 关闭Loading
if (loadingInstance) loadingInstance.close();
// 判断失败原因
if (errorObj.message.includes("timeout")) {
ELEMENT.Message.error("网络繁忙，请刷新后重试...");
} else if (errorObj.message.includes("404")) {
ELEMENT.Message.error("大兄弟，接口地址写错了 404...");
} else if (errorObj.message.includes("取消")) {
console.log("重复点击取消...", errorObj);
} else {
// 邮件报警

}
return Promise.reject(error);
}
);

//