Vue之拦截与响应拦截

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部