axios

最新推荐文章于 2024-11-01 14:29:13 发布

抱书欲眠

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量79

点赞数

文章标签： vue.js ajax

本文链接：https://blog.csdn.net/weixin_47473788/article/details/120050639

版权

该博客主要介绍了如何使用axios库设置请求和响应拦截器，用于处理请求前的token添加以及响应后的不同状态码错误提示。当遇到特定错误时，如401未登录、403权限不足等，会显示相应错误信息并执行相应操作，如跳转至登录页面。

摘要由CSDN通过智能技术生成

import axios from 'axios'
import {Message} from 'element-ui';
import router from '../router';

//请求拦截器
axios.interceptors.request.use(config=>{
	//如果存在token，请求携带这个token
	if (window.sessionStorage.getItem('tokenStr')){
		config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr')
	}
	return config;
},error => {
	console.log(error);
})



//响应拦截器
axios.interceptors.response.use( success => {
	//业务逻辑错误
	if(success.status&& success.status==200){
		if(success.data.code==500||success.data.code==401||success.data.code==403){
			Message.error({message:success.data.message});
			return;
		}
		if(success.data.message){
			Message.success({message:success.data.message});
		}
	}
	return success.data;
}, error => {
	if (error.response.code == 504 || error.response.code == 404) {
		Message.error({message:'服务器无反应'});
	}else if(error.response.code==403){
		Message.error({message:'权限不足，请联系管理员！'})
	}else if(error.response.code == 401){
		Message.error({message:'未登录，请登录！'});
		router.replace('/')
	}else {
		if (error.response.data.message) {
			Message.error({message:error.response.data.message})
		}else {
			Message.error({ message:'未知错误'})
		}
	}
	return;
});

//设置前置路径
let base = '';
//传送json格式的post请求
export const postRequest = (url,params) =>{
	return axios({
		method: 'post',
		url: '${base}${url}',
		data: params
	})
}

//传送json格式的put请求
export const putRequest = (url,params) =>{
	return axios({
		method: 'put',
		url: '${base}${url}',
		data: params
	})
}

//传送json格式的get请求
export const getRequest = (url,params) =>{
	return axios({
		method: 'get',
		url: '${base}${url}',
		data: params
	})
}

//传送json格式的delete请求
export const deleteRequest = (url,params) =>{
	return axios({
		method: 'delete',
		url: '${base}${url}',
		data: params
	})
}