Vue之拦截与响应拦截

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

回到顶部