ElementUI-封裝axios攔截器

引入

axios中文文檔

import axios from 'axios'
import router from '../router/index'  //vue路由
import QS from 'qs';  //將url中的參數轉爲對象；將對象轉爲url參數形式
import { Message } from 'element-ui'; //element的提示信息

環境切換

使用npm run build打包後爲生產環境，根據process.env.NODE_ENV進行環境切換
npm run dev爲開發環境

if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = 'http://127.0.0.1:8989';
}else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'http://101.201.57.175:8989';
}

設置請求超時

axios.defaults.timeout = 10000

post請求頭的設置

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

攔截器

//添加請求攔截器
 axios.interceptors.request.use（function（config） { //在發送請求之前做一些事情return config;   }，function（error） { //做一些有請求錯誤的事情return Promise .reject（error ）;   }）;

//添加響應攔截器
 axios.interceptors.response.use（function（response） { //使用響應數據返回響應；  }，function（error） { //使用響應錯誤返回Promise .reject（error） ;   }）;
    

完整代碼

import axios from 'axios'
import router from '../router/index'
import QS from 'qs';  //將url中的參數轉爲對象；將對象轉爲url參數形式
import { Message } from 'element-ui';

//防止提示信息過多
let flag = true

// 環境切換
if (process.env.NODE_ENV == 'development') {
  axios.defaults.baseURL = 'http://127.0.0.1:8989';
}else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'http://101.201.57.175:8989';
}


// 請求超時
axios.defaults.timeout = 10000

// post請求頭的設置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 請求攔截器
axios.interceptors.request.use(function (config) {
  // 加入token
  const token = localStorage.getItem('token')
  token && (config.headers.Authorization = 'Bearer ' + token)
  return config
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error)
})

// 響應攔截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 400:
          Message.error('錯誤請求');
          break;
        case 401:
          if (flag) {
            Message.error('未登錄，正在跳轉登錄頁！');
            flag = false
          }
          setTimeout(() => {
            router.replace({ path: '/login' })
            flag = true
          }, 1500)
          break
        case 403:
          Message.error('登錄信息已過期，正在跳轉登錄頁');
          localStorage.removeItem('token')// 清除token
          setTimeout(() => {
            router.replace({ path: '/login' })
          }, 1000)
          break
        case 404:
          Message.error('請求錯誤,未找到該資源');
          break;
        case 405:
          Message.error('請求方法未允許');
          break;
        case 408:
          Message.error('請求超時');
          break;
        case 500:
          Message.error('服務器端出錯');
          break;
        case 501:
          Message.error('網絡未實現');
          break;
        case 502:
          Message.error('網絡錯誤');
          break;
        case 503:
          Message.error('服務不可用');
          break;
        case 504:
          Message.error('網絡超時');
          break;
        case 505:
          Message.error('http版本不支持該請求');
          break;
        default:
          error.message = `連接錯誤${error.response.status}`
          break;
      }
      return Promise.reject(error.response)
    }
  }
)



// 封裝get
function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}


// 封裝post
function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, QS.stringify(params))
      .then(res => {
        resolve(res.data);
      })
      .catch(err => {
        reject(err.data)
      })
  });
}

export {axios,get,post}

main.js

import {axios,get,post} from './request/api' // 對axios進行封裝
Vue.prototype.$axios = axios
Vue.prototype.$get = get
Vue.prototype.$post = post