Axios 拦截器允许你在请求或响应被处理之前拦截它们,以进行一些自定义处理。你可以通过添加拦截器来全局处理请求和响应,例如,添加通用的请求头、处理请求错误、或者对响应进行一些处理。

Axios 提供了两种类型的拦截器:请求拦截器和响应拦截器。分别通过 axios.interceptors.request 和 axios.interceptors.response 来设置。

以下是一个简单的示例,演示如何使用 Axios 拦截器:
// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    console.log('请求拦截器:请求发送前');
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    console.error('请求拦截器:请求错误', error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做些什么
    console.log('响应拦截器:响应成功', response);
    return response;
  },
  function (error) {
    // 对响应错误做些什么
    console.error('响应拦截器:响应错误', error);
    return Promise.reject(error);
  }
);

// 发起实际请求
axios.get('https://api.example.com/data')
  .then(response => {
    // 处理请求成功
    console.log('请求成功', response);
  })
  .catch(error => {
    // 处理请求失败
    console.error('请求失败', error);
  });

在上述示例中:

  •  请求拦截器用于在请求发送之前执行一些操作,比如添加请求头、转换请求数据等。

  
  •  响应拦截器用于在收到响应后执行一些操作,比如处理响应数据、检查响应状态等。


你可以根据需要添加多个拦截器,它们会按照添加的顺序依次执行。拦截器返回的值是一个 Promise,可以在拦截器中进行异步操作。

拦截器提供了一种强大的方式来全局处理请求和响应,使得你可以在请求和响应的不同阶段进行自定义操作。


转载请注明出处:http://www.zyzy.cn/article/detail/6282/Axios