import axios from 'axios'
import qs from 'qs'
import { Toast } from "mint-ui"
import {httpBaseUrl} from './config' ====httpBaseUrl为域名地址
/**
* 该文件对axios进行二次封装
*
* 已经将封装后的axios定义了全局变量$http
* 参数值
* method 请求方式, 'GET' 或 'POST',不区分大小写
* url 请求的路径, 不需要写ip,端口以及基础项目路径, ip和端口配置在同文件夹下的config.js文件中,即httpBaseUrl 例如: 10.88.123.01:8080
* data 请求的参数, 类型为一个对象
* 返回值为Promise形式,then()中的回掉参数data 为请求返回值的data, 假设返回值为res , 则data为 res.data的值
*
*
*
*/
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(config=>{
return config
},error=>{
return Promise.reject(error)
})
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(response=>{
return response
},error=>{
return Promise.resolve(error.response)
})
//对错误数据进行处理
function errorState(response){
//如果状态吗正常,则直接返回数据
if(response&&(response.status===200||response.status===304||response.status===400)){
//不需要date之外的数据,可以直接返回response.data
return response
}else{
Toast({
message: '网络异常',
position: 'bottom',
duration: 3000,
})
}
}
//对正确返回数据进行处理
function successState(res){
// if(res.data.body&&res.data.status){
// // if(res.data.body.length==0){
// // Toast({
// // message: '暂无数据',
// // position: 'bottom',
// // duration: 1000,
// // })
// // }
// if(res.data.status.code == '1001'){
// Toast({
// message: '后台报错了',
// position: 'bottom',
// duration: 3000,
// })
// }
// }
}
//后台请求方法
const httpServer=(method='GET',url,data={},option={})=>{
let requestMethod=method.toUpperCase()
if(url.indexOf("://")>0){
url=url
}else if(url[0]!='/'){
url=httpBaseUrl+'/'+url
}else{
url=httpBaseUrl+url
}
let Public={ //存放公共参数
}
let httpDefaultOpts={ //http默认配置
method:requestMethod,
url:url,
timeout:65*1000,
//Object.assign是ES6新添加的接口,主要的用途是用来合并多个JavaScript的对象。
params:Object.assign(Public,data), //GET
// data:qs.stringify(Object.assign(Public,data)),
data:JSON.stringify(Object.assign(Public,data)), //POST
headers:requestMethod=='GET'?{
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
}:{
'X-Requested-With': 'XMLHttpRequest',
// 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
"Content-Type": "application/json; charset=UTF-8"
}
}
Object.assign(httpDefaultOpts,option)
if(requestMethod=='GET'){
delete httpDefaultOpts.data
}else{
delete httpDefaultOpts.params
}
return new Promise((resolve,reject)=>{
axios(httpDefaultOpts).then((res)=>{
// console.log(res)
successState(res)
resolve(res.data)
}).catch((response)=>{
console.log(response)
errorState(response)
reject(response)
})
})
}
export default httpServer
vue-axios二次封装
最新推荐文章于 2024-08-05 09:20:08 发布