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>