vue中axios配置文件最新版

最新推荐文章于 2024-04-20 12:44:55 发布

小野又在卷了

最新推荐文章于 2024-04-20 12:44:55 发布

阅读量346

点赞数

分类专栏： vue js axios 文章标签： vue.js 数学建模前端

本文链接：https://blog.csdn.net/Jenny_ljj/article/details/131113230

版权

vue 同时被 3 个专栏收录

19 篇文章 2 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

axios

2 篇文章 0 订阅

订阅专栏

import axios from 'axios';
import { ElMessage } from 'element-plus';

// 请求超时时间
axios.defaults.timeout = 30000;

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

// 请求拦截器
axios.interceptors.request.use(
	(config) => {
		if (sessionStorage.getItem('Authorization')) {
			// 每次发送请求之前判断vuex中是否存在token
			// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
			// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
			//  存在将token写入 request header
			config.headers.common['Authorization'] = `${sessionStorage.getItem(
				'Authorization'
			)}`;
		}
		return config;
	},
	(err) => {
		return Promise.reject(err);
	}
);

// 响应拦截器
axios.interceptors.response.use(
	(response) => {
		if (response.data.code != 200) {
			if (401 === response.data.code) {
				sessionStorage.clear();
			}
			ElMessage.error(response.data.message);
		}

		return Promise.resolve(response);
	},
	(err) => {
		//==============  错误处理  ====================
		if (err && err.response) {
			switch (err.response.data.code) {
				case 400:
					ElMessage.error(err.response.data.message);
					break;
				case 401:
					ElMessage.error(err.response.data.message);
					break;
				case 302:
					ElMessage.error(err.response.data.message);
					break;
				case 303:
					ElMessage.error(err.response.data.message);
					break;
				case 403:
					ElMessage.error(err.response.data.message);
					break;
				case 404:
					ElMessage.error(err.response.data.message);
					break;
				case 408:
					ElMessage.error(err.response.data.message);
					break;
				case 500:
					ElMessage.error(err.response.data.message);
					break;
				case 501:
					ElMessage.error(err.response.data.message);
					break;
				case 502:
					ElMessage.error(err.response.data.message);
					break;
				case 503:
					ElMessage.error(err.response.data.message);
					break;
				case 504:
					ElMessage.error(err.response.data.message);
					break;
				case 505:
					ElMessage.error(err.response.data.message);
					break;
				default:
					ElMessage.error(`连接出错(${err.response.status})`);
			}
		} else {
			ElMessage.error('连接服务器失败!');
		}
	}
);

/**
 * get方法，对应get请求
 */
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);
			});
	});
}
/**
 * post方法，对应post请求
 */
export function post(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.post(url, params)
			.then((res) => {
				resolve(res.data);
			})
			.catch((err) => {
				reject(err.data);
			});
	});
}

/**
 * delete方法，对应delete请求
 */
export function del(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.delete(url, {
				params: params,
			})
			.then((res) => {
				resolve(res.data);
			})
			.catch((err) => {
				reject(err.data);
			});
	});
}

/**
 * put修改
 * @param {} url
 * @param {*} params
 */
export function put(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.put(url, params)
			.then((res) => {
				resolve(res.data);
			})
			.catch((err) => {
				reject(err.data);
			});
	});
}