赵海辛的博客:https://github.com/HaixinZhao

本人丑的一塌糊涂,瘦的登峰造极,请别骑着思想的野驴,出卖肮脏的灵魂。Vue2群:32922330、Angular4群:427909088。...

vue2项目,前端写请求拦截器和响应式拦截器

很可能进了个假互联网公司,遇到堆假后台尴尬,拦截器沦落到前端写。。。这个拦截器,我们需要写在fetch文件下的api.js里,包括axios的封装,也在这个js文件里面写,如下:

import axios from 'axios'
import vue from 'vue'
import store from './../store/index'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.baseURL = '后台接口'
// 是否首次请求数据
let storeSession = false
// 是否进行一次登录状态的判断
let token = false
let GET_MYLOTTERY_NUM = 0
let header
// 请求拦截器
axios.interceptors.request.use(function(config) {
  // 请求数据之前判断是否首次请求 如果是添加session 如果不是跳过
  header = JSON.parse(config.data.split('=')[1]).head
  if (header.SESSION_ID == '' || header.SESSION_ID == null) {
    storeSession = true
  }
  return config
}, function(error) {
  return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
  if (!parseInt(response.data.head.CODE)) {
    // 判断是否为第一次登陆,如果是在第一次请求的时候在vuex中添加 SESSION_ID
    if (storeSession) {
      store.dispatch('SESSION_ID', response.data.head.SESSION_ID)
      storeSession = false
    }
    // 判断是否是登录请求,如果是登录请求
    // 判断登录状态
    if (store.state.common.token != '' && store.state.common.token != null) {
      GET_MYLOTTERY_NUM++
      if (GET_MYLOTTERY_NUM <= 1) {
        token = true
      }
    } else {
      //  未登录状态,并进入登录页面登录
      if (header.TYPE == 'LOGIN') {
        token = true
      }
    }
    return response
  } else {
    alert(response.data.head.MSG)
  }
}, function(error) {
  return Promise.reject(error)
})
// 封装axiospost请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
export default {
  // 组件中公共页面请求函数
  commonApi(url, params) {
    return fetch(url, params)
  }
}

这样就完成了拦截器……

阅读更多
版权声明:Vue2群:32922330 。Angular4群:427909088 。有需要交流的可进群交流。https://github.com/HaixinZhao https://blog.csdn.net/zhaohaixin0418/article/details/73549261
个人分类: Vue2
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭