vue项目中使用了axios去向后台请求数据,但是因为请求返回的then和catch要写的东西很多,而且每次请求都得写一次显得代码很冗余,所以我想复写四个方法,我只需要关心正确返回也就是res.status == 200即可,请问大伙我该怎么写?
// 复写前的axios
this.$axios({
url: `${this.$api.zhishizhongxinUrl}/workbench/newinfo/rotation`,
methods: 'get',
params: {
imageNew: 1,
num: 4,
// typeId:
}
}).then(res => {
if (res.data.code == 200) {
this.imgList = res.data.data
} else {
this.$message({
duration: 1000,
message: '新闻获取失败,错误原因:' + res.data.message,
type: 'warn'
})
}
}).catch(err => {
this.$message({
duration: 1000,
message: '新闻获取失败,错误原因:' + err,
type: 'error'
})
})
哈喽,直接写成一个方法,什么请求方式直接传进来就好啦,参考一下,有用请点采纳
/**
* @param url 接口地址
* @param method 请求类型 默认 get
* @param data 数据参数
* @param option 配置项
*/
export function simpleRequest(url,method='get',data,option={}) {
return ()=>{
return new Promise((resolve, reject) => {
http.request(Object.assign({
url,
method,
params: method==='get'? data: {},
data: method==='post'? data: {}
},option)).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
}
我现在写的是基于promise封装的,但是我调用的时候还是得处理那些不是200和catch的情况,请问我如何把这两种情况也写进复用的方法里,保证我后面在调用这个方法时候只需关心正确返回的情况
get: function(url, data) {
return new Promise((resolve, reject) => {
/**
* axios get请求封装方法
* @param {路径} url String
* @param {参数} params Object
**/
axios({
url: url,
method: 'get',
params: data
})
.then(res => {
if (res.status == 200) {
resolve(res)
} else {
reject(res)
}
})
.catch(err => {
reject(err)
})
})
},
this.$axios.interceptors.response.use((response) => {
if(response.data.code == 200){
return response
} else {
this.$message({
duration: 1000,
message: res.data.message,
type: 'warn'
})
}
},(error)=> {
this.$message({
duration: 1000,
message: '服务异常',
type: 'error'
})
})
this.$axios({
url: `${this.$api.zhishizhongxinUrl}/workbench/newinfo/rotation`,
methods: 'get',
params: {
imageNew: 1,
num: 4,
// typeId:
}
}).then(res => {
this.imgList = res.data.data
})
// 请求全局配置
$axios.onRequest((config) => {
const token = cookies.get('token')
config.headers.Authorization = `Bearer ${token || ''}`
return config
})
// 请求结果处理
$axios.onResponse((res) => {
const { code, msg } = res.data
if (code > 300 && code < 400 && isLogin) {
isLogin = false
MessageBox.confirm(msg, '提示', {
type: 'warning',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
closeOnPressEscape: false,
callback: () => {
cookies.remove('token')
redirect('/login')
isLogin = true
},
})
}
return res
})
// 请求错误处理
$axios.onError(({ message, response }) => {
Message.closeAll()
Message.error({ message, offset: 100 })
switch (response.status) {
case 504:
redirect('/login')
break
case 401:
redirect('/login')
break
}
})