Axios拦截器之error参数

我们都知道Axios的响应拦截器

axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

 

但是打印error却是 "Uncaught (in promise) Error: Request failed with status code 404" 这种文字报错。没办法根据请求的参数做一些特定的error逻辑处理,看API文档也没有相关的说明,百度也没有搜到。

其实error处理函数中也是有response的,这个参数隐藏的比较深,我们用 Object.keys( error ) 就能看到,error也是有属性名的:["config", "request", "response", "isAxiosError", "toJSON"],这里就可以愉快的用error.response去做判断啦

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,下面是一个简单的axios拦截器封装示例: ```javascript import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 if (localStorage.token) { // 设置请求头的token config.headers.Authorization = localStorage.token; } return config; }, error => { // 对请求错误做些什么 console.log(error); Promise.reject(error); } ); // respone拦截器 service.interceptors.response.use( response => { // 对响应数据做些什么 return response.data; }, error => { // 对响应错误做些什么 console.log('err' + error); return Promise.reject(error); } ); export default service; ``` 在这个示例中,我们创建了一个名为`service`的axios实例,并在它的`request`和`response`拦截器中分别实现了一些逻辑。 在`request`拦截器中,我们可以在请求发出前对请求做一些处理,比如添加请求头、打印日志等操作。 在`response`拦截器中,我们可以在响应返回后对响应数据做一些处理,比如解析数据、处理错误等操作。 这样一来,我们就可以通过使用这个`service`实例来发送请求,并且在每个请求的过程中都会经过我们的拦截器,可以方便地对请求和响应进行统一处理。 ### 回答2: axios拦截器封装是指在使用axios库发送请求和获取响应时,对请求进行一些预处理或对响应进行一些后处理的过程。通过拦截器封装,我们可以在请求发送之前,对请求参数进行校验、添加请求头、设置请求超时等操作,也可以在响应返回之后,对返回数据进行格式化、统一处理错误信息等操作。 使用axios拦截器封装需要先创建一个axios实例,并调用该实例的`interceptors`属性来设置请求和响应拦截器拦截器是一个链式调用的过程,我们可以在请求拦截器中添加`use`方法,对请求进行拦截: ```javascript axiosInstance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 // 对请求config进行修改,如添加请求头 return config; }, function (error) { // 处理请求错误 return Promise.reject(error); }); ``` 在响应拦截器中,我们可以添加`use`方法来对响应进行拦截处理: ```javascript axiosInstance.interceptors.response.use(function (response) { // 在响应成功返回之前做些什么 // 对响应数据进行处理,如格式化数据 return response; }, function (error) { // 处理响应错误 return Promise.reject(error); }); ``` 这样,每次请求发送前和响应返回之后,都会经过对应的拦截器逻辑。 通过封装axios拦截器,我们可以实现统一的请求和响应处理逻辑,提高代码的可复用性和可维护性。例如,我们可以在请求拦截器中添加统一的loading效果,在响应拦截器中处理统一的错误信息。此外,我们还可以根据需要对拦截器进行扩展,实现更复杂的请求流程控制。 总之,axios拦截器封装为我们提供了灵活的请求和响应处理机制,使得我们可以在不同的环节对请求进行处理,简化了我们的开发过程。 ### 回答3: axios是一个基于promise的HTTP客户端,可以在浏览器和Node.js中使用。它提供了一个简单的API来处理HTTP请求和响应。 拦截器axios非常有用的功能之一,它允许我们在发送请求或收到响应之前执行中间操作。通过拦截器,可以很方便地对请求和响应进行处理和修改。 在使用axios拦截器之前,我们需要先创建一个axios实例,可以设置实例的默认配置,如接口地址、请求超时时间等。然后,我们可以使用`axios.interceptors.request`和`axios.interceptors.response`方法来添加拦截器。 请求拦截器可以在发送请求之前对请求进行处理,比如添加请求头、处理请求数据等。我们使用`axios.interceptors.request.use`方法来添加请求拦截器,并传入一个回调函数。该回调函数可以接收一个配置对象参数,我们可以在其中对配置进行修改或处理,最后需要返回配置对象或一个新的promise对象。 响应拦截器可以在接收到响应之后对响应进行处理,比如统一处理错误信息、对响应数据进行处理等。我们使用`axios.interceptors.response.use`方法来添加响应拦截器,并传入一个回调函数。该回调函数可以接收一个响应对象参数,我们可以在其中对响应进行修改或处理,最后需要返回响应对象或一个新的promise对象。 通过这种方式,我们可以封装一些通用的处理逻辑,比如添加公共请求头、处理接口返回的错误信息等。这样可以减少重复的代码,并提高项目的可维护性和扩展性。 总结起来,axios拦截器封装可以更方便地对请求和响应进行处理和修改,提高代码的复用性和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值