Vue之拦截与响应拦截
vue中有一个拦截方法,当我们发起请求或者请求回来的时候,我们需要做一定的数据过滤或者拦截
下面是在开发项目时进行的一个axios的请求封装;
拦截器:就是我们在请求之前进行的一个操作比如说,我们可以在请求之前加一个loading框,在响应拦截后进行loading框的一个去除。
响应拦截:就是请求得到回应,我们可以做一个状态的拦截,比如说405,404等等状态吗,我们可以做一个拦截,然后在页面进行响应的展示。
import axios from 'axios'
let cancel ,promiseArr = {}const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
//发起请求时,取消掉当前正在进行的相同请求
if (promiseArr[config.url]) {
promiseArr[config.url]('操作取消')
promiseArr[config.url] = cancel
} else {
promiseArr[config.url] = cancel
}
return config
}, error => {
return Promise.reject(error)
})
//响应拦截器
axios.interceptors.response.use(response => {
return response
}, error => {
return Promise.resolve(error.response)
})
axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000
export default {
//get请求
get (url,param) {
return new Promise((resolve,reject) => {
axios({
method: 'get',
url,
params: param,
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
})
})
},
//post请求
post (url,param) {
return new Promise((resolve,reject) => {
axios({
method: 'post',
url,
data: param,
cancelToken: new CancelToken(c => {
cancel = c
})
}).then(res => {
resolve(res)
})
})
}
}
这是开发后台管理系统时用到的一个elemnt-ui封装的一个请求
import axios from 'axios'import {Message,Loading} from 'element-ui'
import router from '../router'
// 请求拦截
axios.interceptors.request.use(config=> {
Loading.service({text:"Loading..."});
return config;
}, err=> {
Message.error({message: '请求超时!'});
return Promise.resolve(err);
})
// 响应拦截
axios.interceptors.response.use(res=> {
Loading.service().close();
if (res.data.code == 200) {
return res.data.result;
} else if (res.data.code == 401) {
router.push('/login')
} else if(res.data.code == 201){
Message.error({message: res.data.msg});
return Promise.reject(res);
}
return Promise.reject(res);
}, err=> {
Loading.service().close();
if (err.response.status == 504||err.response.status == 404) {
Message.error({message: '服务器被吃了⊙﹏⊙∥'});
} else if (err.response.status == 403) {
Message.error({message: '权限不足,请联系管理员!'});
} else {
Message.error({message: '未知错误'});
}
return Promise.reject(err);
})
let base = '';
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
export const getRequest = (url,data='') => {
return axios({
method: 'get',
params: data,
url: `${base}${url}`
});
}
以上是 Vue之拦截与响应拦截 的全部内容, 来源链接: utcz.com/z/375742.html