vue webpack 前端项目请求响应拦截器的配置

前言: vue项目开发中没有统一管理http、https响应的入口配置因此为方便处理统一管理需要去构建一个统一接收响应的入口处理提示信息错误

项目开发中一般会有统一的http路由管理文件方便管理所有请求接口

```
// 安装axios
npm install --save-dev axios
// 在http请求文件引入
import axios from 'axios';
axios.interceptors.response.use((response) => {
	// 处理请求200的操作,默认不需要操作,可直接返回 return 返回正确信息调用接口时可以直接promise then 取到正确信息
	return response;
},(error)=>{
	 if (!error.response) {
  			console.log('网络超时,或者请求响应不成功,无返回状态')
  		return Promise.resolve(error);
  }
  // 处理状态码操作
  switch (error.response.status) {
  	case 400:
  		console.log('参数错误')
  		break;
  	case  500:
  		console.log('后端错误,一般为空指针异常')
  		break;
  	default :
  	return Promise.reject(error);
  }
  // return error 返回错误
  return error;
})


// 请求接口地址用于其依赖文件调用
export default {
  	getTest() {
		return axios.get(‘http://127.0.0.1:8080’);
 	},
}
```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值