axios封装使用
程序员文章站
2022-03-23 22:13:30
//下载 axios && qs// 导出axios模块import axios from 'axios'// 导入qs模块import qs from 'qs'// 设置开发环境(生产环境)switch (process.env.NODE_ENV) { case 'production': axios.defaults.baseURL = 'http://tealseaproduction:80';// 开发环境 break; c...
//下载 axios && qs
// 导出axios模块
import axios from 'axios'
// 导入qs模块
import qs from 'qs'
// 设置开发环境(生产环境)
switch (process.env.NODE_ENV) {
case 'production':
axios.defaults.baseURL = 'http://tealseaproduction:80';// 开发环境
break;
case 'test':
axios.defaults.baseURL = 'http://tealseatest:3000';// 测试环境
break;
default:
axios.defaults.baseURL = 'http://tealseadevelop:3000';// 开发环境
};
// 设置超时时间(十秒)
axios.defaults.timeou = 10000;
// 设置跨域请求携带凭证(是)
axios.defaults.withCredentials = true;
//设置请求参数格式(x-www-form-urlencoded)
axios.defaults.headers['Content-Type'] = "application/x-www-form-urlencoded";// 格式xxx=xxx&&xxx=xxx
//将json格式转换为x-www-form-urlencoded格式[ tranformRequest只对post请求起作用, data是传递的参数 ]
axios.defaults.transformRequest = data => qs.stringify(data);//将{name=xxx,age=xx}=>name=xxx&&age=xx
// 请求拦截器
axios.interceptors.request.use(config => {
// 携带本地存储的token
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => {
// 将失败信息返回
return Promise.reject(error);
});
// 相应拦截器
axios.interceptors.response.use(response => {
// 直接返回数据
return response.data;
}, error => {
let { response } = error;
// 判断是否有数据返回
if (response) {
// 判断返回状态码,来判断错误问题
switch (response.status) {
case 401://一般是未登录
break;
case 403://一般为token
break;
case 404: //找不到页面地址
break;
};
// 服务器什么都没返回
} else {
// 断网状态
if (!window.navigator.onLine) {
console.log('没有网络');
return
};
// 服务器有问题
return Promise.reject(error);
};
});
// 将axios暴露出去
export default axios;
本文地址:https://blog.csdn.net/Teal__/article/details/108716128
推荐阅读
-
爱剪辑新手使用怎么查看帮助? 爱剪辑新手帮助的使用方法
-
详解Python中使用base64模块来处理base64编码的方法
-
ae怎么使用光学补偿制作转场特效?
-
bandicam注册机如何使用 bandicam注册机使用最全教程
-
SwiftScribe如何使用 AI音频转录工具SwiftScribe最全攻略
-
会声会影怎么使用多重修整视频功能?
-
使用GoldWave将无损音乐格式flac转换为MP3格式
-
WinXP系统下ipconfig命令怎么用?WinXP系统下ipconfig命令使用的方法
-
LeapFTP中文绿色版使用介绍
-
Spring boot中使用Spring-data-jpa方便快捷的访问数据库(推荐)