详解ajax、fetch、axios的区别
import axios from "axios"; // 第三方库 需要安装
import serverConfig from "http://www.jb51.net/javascript/config";
// 创建axios实例
const apiClient = axios.create({
baseURL: serverConfig.baseUrl, // 基础请求地址
withCredentials: false, // 跨域请求是否需要携带cookie
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
timeout: 10000, // 请求超时时间
});
// 请求拦截
apiClient.interceptors.request.use(
(config) => {
// 请求发送前的处理逻辑 比如token认证，设置各种请求头啥的
// 如果开启token认证
if (serverConfig.useTokenAuthentication) {
// 请求头携带token
config.headers.Authorization = localStorage.getItem("token");
}
return config;
},
(error) => {
// 请求发送失败的处理逻辑
return Promise.reject(error);
}
);
// 响应拦截
apiClient.interceptors.response.use(
(response) => {
// 响应数据处理逻辑，比如判断token是否过期等等
// 代码块
return response;
},
(error) => {
// 响应数据失败的处理逻辑
let message = "";
if (error && error.response) {
switch (error.response.status) {
case 302:
message = "接口重定向了！";
break;
case 400:
message = "参数不正确！";
break;
case 401:
message = "您未登录，或者登录已经超时，请先登录！";
break;
case 403:
message = "您没有权限操作！";
break;
case 404:
message = `请求地址出错: ${error.response.config.url}`;
break;
case 408:
message = "请求超时！";
break;
case 409:
message = "系统已存在相同数据！";
break;
case 500:
message = "服务器内部错误！";
break;
case 501:
message = "服务未实现！";
break;
case 502:
message = "网关错误！";
break;
case 503:
message = "服务不可用！";
break;
case 504:
message = "服务暂时无法访问，请稍后再试！";
break;
case 505:
message = "HTTP 版本不受支持！";
break;
default:
message = "异常问题，请联系管理员！";
break;
}
}
return Promise.reject(message);
}
);
export default apiClient;