axios拦截器

请求拦截器

Axios的请求拦截器允许您在发送请求之前对其进行拦截和修改。您可以使用axios.interceptors.request对象来添加和移除请求拦截器。以下是请求拦截器的使用方法：

添加请求拦截器

要添加请求拦截器，使用axios.interceptors.request.use()方法。此方法接受两个参数：一个成功的回调函数和一个错误的回调函数。在成功的回调函数中，您可以修改请求配置或添加自定义的逻辑。在错误的回调函数中，您可以处理请求错误。以下是一个添加请求拦截器的示例：

代码语言：javascript复制

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

在上面的示例中，我们使用axios.interceptors.request.use()方法添加了一个请求拦截器。在成功的回调函数中，我们可以修改请求配置并返回修改后的配置。在错误的回调函数中，我们可以处理请求错误并返回一个拒绝的Promise。

移除请求拦截器

如果您需要移除已添加的请求拦截器，可以使用axios.interceptors.request.eject()方法，并传入要移除的拦截器函数。以下是一个移除请求拦截器的示例：

代码语言：javascript复制

var myInterceptor = axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 移除请求拦截器
axios.interceptors.request.eject(myInterceptor);

在上面的示例中，我们首先使用axios.interceptors.request.use()方法添加了一个请求拦截器，并将返回的拦截器函数保存在变量myInterceptor中。然后，我们使用axios.interceptors.request.eject()方法移除该拦截器。

响应拦截器

Axios的响应拦截器允许您在处理响应数据之前对其进行拦截和修改。您可以使用axios.interceptors.response对象来添加和移除响应拦截器。以下是响应拦截器的使用方法：

添加响应拦截器

要添加响应拦截器，使用axios.interceptors.response.use()方法。此方法接受两个参数：一个成功的回调函数和一个错误的回调函数。在成功的回调函数中，您可以对响应数据进行处理或添加自定义的逻辑。在错误的回调函数中，您可以处理响应错误。以下是一个添加响应拦截器的示例：

代码语言：javascript复制

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

在上面的示例中，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器。在成功的回调函数中，我们可以对响应数据进行任何必要的处理，并返回修改后的响应。在错误的回调函数中，我们可以处理响应错误并返回一个拒绝的Promise。

移除响应拦截器

如果您需要移除已添加的响应拦截器，可以使用axios.interceptors.response.eject()方法，并传入要移除的拦截器函数。以下是一个移除响应拦截器的示例：

代码语言：javascript复制

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

// 移除响应拦截器
axios.interceptors.response.eject(myInterceptor);

在上面的示例中，我们首先使用axios.interceptors.response.use()方法添加了一个响应拦截器，并将返回的拦截器函数保存在变量myInterceptor中。然后，我们使用axios.interceptors.response.eject()方法移除该拦截器。

示例

以下是一个完整的示例，展示了如何使用请求和响应拦截器：

代码语言：javascript复制

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  console.log("请求拦截器：", config);
  return config;
}, function (error) {
  // 对请求错误做些什么
  console.log("请求错误：", error);
  return Promise.reject(error);
});

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

// 发送请求
axios.get("https://api.example.com/data")
  .then(function (response) {
    console.log("响应数据：", response.data);
    // 在这里处理返回的数据
  })
  .catch(function (error) {
    console.log("请求错误：", error);
    // 在这里处理请求错误
  });

在上面的示例中，我们首先使用axios.interceptors.request.use()方法添加了一个请求拦截器，它会在发送请求之前打印请求配置。然后，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器，它会在收到响应后打印响应数据。最后，我们发送了一个GET请求并处理成功的响应和请求错误。

axios

0 人点赞