vue接口封裝請求響應攔截器

 

request.js

import axios from 'axios'
import {getToken,GetQueryString} from '@/utils/auth'
import { Notification, MessageBox, Message } from 'element-ui'

const service = axios.create({
  baseURL: configBase.baseURL,
  headers: {
    'content-type': 'application/json',
    'token':  getToken()?getToken():GetQueryString('token'),
  },
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 50000 // request timeout
})
// 添加請求攔截器
service.interceptors.request.use(config => {
    // do something before request is sent
    // console.log('config', config)
    // 是否需要設置 token
    // const isToken = (config.headers || {}).isToken === false
    // if (getToken() && !isToken) {
    //   config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    // }
    return config
  },
  error => {
    // do something with request error
    // for debug
    return Promise.reject(error)
  })


// 添加響應攔截器
service.interceptors.response.use(response => {
    // 對響應數據做點什么
    if (response.data === '200') {
      if (response.data.code === '1001') {
        // 對響應數據做點什么
      }
    }else{
      
    }
    return response.data
  },
  error => {
    console.log('err' + error)
    let {
      message
    } = error;
    if (message == "Network Error") {
      message = "后端接口連接異常";
    } else if (message.includes("timeout")) {
      message = "系統接口請求超時";
    } else if (message.includes("Request failed with status code")) {
      message = "系統接口" + message.substr(message.length - 3) + "異常";
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  })

export default service

auth.js

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

// 獲取url參數
export const GetQueryString=(name)=> { 
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
 
}

api.js引入使用

import axios from '@/axios/request'


export const getBaseType = (params) => {
  return axios({
    url: '/common/baseDataList/baseType',
    method: 'get',
　　params:params
  })
}

export const getBaseInfoList = (params) => {
  return axios({
    url: '/common/dataList/baseInfo',
    method: 'post',
    data: params
  })
}