/**
* @param 封装ajax请求
* 以及其他的操作
* axios 专门处理cros跨域的
* **/
import axios from 'axios'
//引入全局状态管理
import store from '../store/index'
//引入路由
import router from '../router/index'
//引入缓存文件
import storage from '../storage/storage'
//设置axios 请求超时
/**
* @param 设置超时
* **/
axios.defaults.timeout = 5000;
//配置基本路径
axios.defaults.baseURL='http://127.0.0.1:8000';
//继续默认设置post的请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
//设置ajax拦截器
/**
* request 拦截
* response 拦截
* **/
//请求拦截器
axios.interceptors.request.use((config) => {
//检测登录状态之类的
const tokenid = store.state.token;
//检测token存在 并且给请求头设置Authortoken 为token 传后台检测
tokenid && (config.headers.Authortoken = tokenid);
return config;
}, error => {
return Promise.error(error);
});
//设置响应拦截器
axios.interceptors.response.use((response) => {
//如果状态码200
if (response.status == 200) {
return Promise.resolve(response);
}
else {
return Promise.reject(response);
}
}, (error) => {
//响应失败 404 500
if (error.response.status) {
switch (error.response.status) {
// 401 未登录状态
case 401:
//直接路由跳转 到登录界面
router.replace({
path: '/login'
});
break;
//403 token 失效
//清除 store
//清除 token缓存
case 403:
storage.removeItem("token");
store.commit("removeToken");
router.replace({
path: '/login'
});
break;
case 404:
alert("网络请求不存在!");
break;
default:
console.log(error.response.data.message);
break;
}
return Promise.reject(error.response);
}
});
//封装get post 请求
/**
* @param url 请求地址
* @param params 携带参数
* **/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
//响应数据
resolve(res.data);
}).catch(err => {
reject(err.data);
});
});
}
/**
* @param url 请求地址
* @param params 携带参数
* **/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url,params).then(res => {
//响应数据
resolve(res.data);
}).catch(err => {
reject(err.data);
});
});
}
封装axios
最新推荐文章于 2024-08-18 19:37:55 发布
本文档展示了如何使用Axios库封装HTTP请求,包括设置超时、基础URL,以及配置请求和响应拦截器。拦截器用于处理登录状态、错误提示,以及根据不同的错误状态进行相应的操作,如401未登录和403 token失效时的页面跳转。同时,提供了get和post两个封装的方法,方便进行API调用。
摘要由CSDN通过智能技术生成