Axios錯誤處理

錯誤處理：請求錯誤時進行的處理

一般無論是請求錯誤還是響應錯誤的錯誤處理最終都會進入到.catch函數中

<template>
  <div class="axios">
    <h1>axios錯誤處理</h1>
    <div v-show="error">響應錯誤顯示</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'axios3-4',
  data() {
    return {
      error: false
    }
  },
  created() {
    // 例子  實際開發過程中，一般添加統一錯誤處理
    const myInstance = axios.create({})	//  創建實例
    
    myInstance.interceptors.request.use(config => {	// 請求攔截器
      return config
    }, err => { // 請求錯誤一般http狀態碼以4開頭，常見：401超時，404 not found
      console.log('請求錯誤')
      return Promise.reject(err)
    })
    
    myInstance.interceptors.response.use(res => {	// 響應攔截器
      return res
    }, err => { // 響應錯誤處理一般http狀態碼以5開頭，常見：500系統錯誤，502系統重啓 
      console.log('響應錯誤')
      this.error= true
      return Promise.reject(err)
    })
    
    myInstance.get('/data.json').then(res => {	// 請求數據
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
}
</script>