82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
/*
|
||
* @Description: {{ByRuin}}
|
||
* @Version: 2.0
|
||
* @Author: Ruin 🍭
|
||
* @Date: 2022-01-25 17:48:13
|
||
* @LastEditors: 刘引
|
||
* @LastEditTime: 2022-01-25 17:52:39
|
||
*/
|
||
/* 1.引入文件 */
|
||
import axios from 'axios' //引入 axios库
|
||
// @ts-ignore
|
||
import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）
|
||
/* 2.全局默认配置 */
|
||
let baseURL
|
||
let process: any
|
||
// 判断开发环境（一般用于本地代理）
|
||
if (process.env.NODE_ENV === 'development') {
|
||
// 开发环境
|
||
baseURL = 'http://www.liulongbin.top:3006' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
|
||
} else {
|
||
// 编译环境
|
||
if (process.env.type === 'test') {
|
||
// 测试环境
|
||
baseURL = 'http://www.liulongbin.top:3006'
|
||
} else {
|
||
// 正式环境
|
||
baseURL = 'http://www.liulongbin.top:3006'
|
||
}
|
||
}
|
||
// 配置axios的属性
|
||
axios.defaults.timeout = 6000 // 请求超时时间1分钟
|
||
axios.defaults.baseURL = baseURL // 你的接口地址
|
||
axios.defaults.responseType = 'json'
|
||
axios.defaults.withCredentials = false //是否允许带cookie这些
|
||
/*你也可以创建一个实例，然后在实例中配置相关属性，此方法和上面的方法一样，写法不同，怎么用随个人
|
||
*喜好，我比较喜欢用这种方法，如下：
|
||
*/
|
||
const Axios = axios.create({
|
||
baseURL: baseURL, // 后台服务地址
|
||
timeout: 60000, // 请求超时时间1分钟
|
||
responseType: 'json',
|
||
withCredentials: false // 是否允许带cookie这些
|
||
})
|
||
/* 3.设置拦截器 */
|
||
/*如果不是用创建实例的方式配置，那么下面的Axios都要换成axios,也就是文件开头你用import引入axios
|
||
时定义的变量*/
|
||
Axios.interceptors.request.use(
|
||
(config) => {
|
||
//发送请求前进行拦截
|
||
// 可在此处配置请求头信息
|
||
// config.headers["appkey"] = "...";
|
||
// config.headers["token"] = "...";
|
||
if (config.method == 'post') {
|
||
/*数据转换: axios post方式默认是json格式提交数据，如果使用application/x-www-form-urlencoded数据格式提交，要用qs.stringify()进行转换,个人建议不在拦截器中全局配置，因为不够灵活，还有一点是，如果
|
||
设置了重新请求的配置，那么重新请求时，请求体中的config里面的传参就会被再次进行qs.stringify()转
|
||
换，会使得参数丢失，造成请求失败。*/
|
||
config.data = qs.stringify(config.data)
|
||
}
|
||
return config
|
||
},
|
||
(error) => {
|
||
//console.log("错误的传参", 'fail');
|
||
return Promise.reject(error)
|
||
}
|
||
)
|
||
Axios.interceptors.response.use(
|
||
(res) => {
|
||
//请求响应后拦截
|
||
if (res.status == 200) {
|
||
// 对响应数据做些事
|
||
//alert("提交成功")
|
||
return Promise.resolve(res)
|
||
}
|
||
return res
|
||
},
|
||
(error) => {
|
||
//alert("网络异常!") 404等问题可以在这里处理
|
||
return Promise.reject(error)
|
||
}
|
||
)
|
||
export default Axios
|