笔记大全

vuejs如何请求拦截

更新时间：2023-09-30

Vue.js是一个流行的前端框架，具有轻量级和高效的特点。在进行网络请求时，我们需要在代码中使用拦截器来截取请求和响应。这意味着我们可以在发送请求和获取响应之前，进行一些自定义的处理。 ## 1. 常规的请求拦截在Vue.js中，我们可以使用axios拦截器来拦截请求和响应。在这里，我们使用axios来发出网络请求，并在发送请求时进行拦截。请求拦截器可以用于许多用例，例如添加授权标头或设置通用URL等。以下是一个简单的请求拦截器示例： ```html

常规的请求拦截:

axios.interceptors.request.use(
  config => {
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('access_token')
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

在这个示例中，我们向所有的请求添加了一个授权标头。这个标头是从localStorage中获取的访问令牌生成的。此外，我们还可以使用一个响应拦截器来处理所有的响应。

## 2. 重试拦截有时候，我们的网络请求可能会因为网络故障而失败。这种情况下，我们可能需要多次重试请求，直到成功。在这里，我们使用了一个自定义的重试拦截器来帮助我们达成这个目的。以下是一个简单的重试拦截器示例： ```html

重试拦截:

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
  var config = err.config;

  // 如果没有设置重试选项，则拒绝
  if(!config || !config.retry) {
    return Promise.reject(err);
  }

  // 设置变量存储重试次数
  config.__retryCount = config.__retryCount || 0;

  // 如果已经超过了最大重试次数，则拒绝
  if(config.__retryCount >= config.retry) {
    return Promise.reject(err);
  }

  // 增加重试次数
  config.__retryCount += 1;

  // 创建一个新的Promise来延迟重试
  var backoff = new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, config.retryDelay || 1);
  });

  // 返回这个Promise并重试请求
  return backoff.then(function() {
    return axios(config);
  });
});

在这个示例中，我们使用了一个响应拦截器，并定义了一个重试拦截器。这个拦截器将重试失败的请求，并指定重试次数和延迟。

## 3. 统一处理错误当我们进行网络请求的时候，有时会遇到许多错误。在这里，我们可以使用axios拦截器来统一处理所有的HTTP错误。以下是一个简单的错误处理器示例： ```html

统一处理错误:

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response.status === 401) {
        alert('需要登录')
        localStorage.removeItem('access_token')
        router.push('/login')
    }
    return Promise.reject(error)
  }
)

在这个示例中，我们定义了一个响应拦截器，并用它来处理所有的HTTP错误。在这里，我们检查了我们是否遇到了401错误。如果出现这个错误，我们会把用户重定向到登录页面。

## 4. 带Token的请求拦截有时候，在我们的应用程序中，我们需要向后端发送带有Token的请求。在这种情况下，我们可以使用axios拦截器来自动向请求中添加Token。以下是一个简单的带Token的请求拦截器示例： ```html

带Token的请求拦截:

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('access_token')
    if (token) {
      config.headers.common['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

在这个示例中，我们向所有的请求添加了一个带Token的授权标头。我们通过从localStorage中获取访问令牌来生成授权标头。

综上所述，Vue.js中的axios拦截器允许我们截取和定制我们的网络请求和响应。我们可以使用响应拦截器来处理错误和HTTP响应，使用请求拦截器来编辑请求，使用自定义拦截器来自动重试请求，并向请求添加Token。这些拦截器不仅使我们的代码更加灵活，而且可以使我们更好地控制我们的应用程序的表现和性能。

c语言编程笔录