axios的两种拦截器，以及拦截器和接口请求中的错误处理

//请求拦截器、响应拦截器以及接口请求中的错误处理
//请求拦截器
axios.interceptors.request.use(config=>{
  return config   //请求拦截器成功时返回值
},err=>{
  return Promise.reject(err)   //请求错误时通过该方法返回配置信息
})
//响应拦截器
axios.interceptors.response.use(res=>{
  return res                    //响应成功时return返回的数据
},err=>{
  return Promise.reject(err)    //响应错误时返回错误信息
})
//请求接口
axios.get('/data.json').then((res)=>{
  console.log(res)         //响应成功信息会到这里
}).catch(err=>{
  console.log(err)         //无论请求错误或者响应错误最后的错误信息都会到这里
})

// 例子：实际开发过程中，一般添加统一错误处理、
let instance2 = axios.create({})    //创建实例
//请求拦截器
instance2.interceptors.request.use(config=>{
  return config
},err=>{
  //请求错误时一般http状态码为两种以4开头，
  // 401：超时、404：not found 没找到接口
  $('#div').show()    //显示错误提示
  setTimeout(()=>{    //两秒后错误提示消失
    $('#div').hide()
  },2000)
  return Promise.reject(err)
})

//响应拦截器
instance2.interceptors.response.use(res=>{
  return res
},err=>{
  //响应错误处理，http状态码以5开头
  //500：系统错误，502：系统重启
  $('#div').show()    //显示错误提示
  setTimeout(()=>{    //两秒后错误提示消失
    $('#div').hide()
  },2000)
  return Promise.reject(err)
})

//请求拦截器和响应拦截器创建好后，就可以通过创建的实例请求接口如下：
//如果你想使用统一的错误处理弹窗，例如拦截器中的统一错误提示就可使用方法一
//如果你需要做单独处理，觉得这个统一弹窗不够，需要再加，就可使用方法二
//方法一：
instance2.get('/data.json').then(res=>{
  console.log(res)      //处理返回信息
})

//方法二：
instance2.get('/data.json').then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)             //在这里可以再做一些错误处理的操作
})
//一般在实际开发中错误信息都是通过这种方式统一处理掉
//说明：先创建实例、创建请求拦截器和响应拦截器并在错误信息那里处理掉错误信息