vue中使用axios與axios的請求響應攔截

VUE中使用Axios

• axios的安裝
  npm install axios vue-axios
• axios在vue的配置與使用
  在main.js中引入axios和vue-axios

  import axios from 'axios'
  import VueAxios from 'vue-axios
  

  在vue中使用axios和vue-axios

  Vue.use(VueAxios,axios);
  

  配置axios基礎地址

  axios.defaults.baseURL = '地址'
  

  配置axios基礎請求頭

  axios.defaults.headers.post['Content-Type'] = Content-Type: 'application/json; charset=UTF-8'
  

  在進行請求的時候直接使用即可

  this.axios.post("請求地址", {para: "參數"}, {}).then(res => {
      // res即為請求結果
  })
  

• 請求響應攔截

// 請求攔截
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    // 在發起請求前，給所有請求的頭部添加token
    config.headers.common['token'] = JSON.parse(token).token;
  }
  return config;
}, error => {
  // 對請求失敗做處理
  return Promise.reject(error);
})
// 響應攔截
axios.interceptors.response.use(res => {
  // 對響應數據做處理
  // console.log("對響應數據做處理")
  const code = res.data.code;
  if (code === 401) {
    // 判斷res.data.res_code 是否是401 如果是則跳轉到登錄，如果不是則正常返回
    ElementUI.Message({
      message: '請登錄',
      type: 'warning'
    });
    router.push('/login')
    // 刪除token以及user
    localStorage.removeItem('user')
    localStorage.removeItem('token')
    return false;
  } else if (code === -104) {
    ElementUI.Message({
      message: '系統異常',
      type: 'warning'
    });
    return false;
  }
  return res;
}, error => {
  // 對響應錯誤做處理
  return Promise.reject(error);
})