Vue网络请求之interceptors实际应用

2024-01-02 17:25:02

Vue网络请求之interceptors实际应用

在实际项目开发中，我们经常会遇到需要在每个请求中携带token的情况。token是用于验证用户身份的令牌，它通常会存储在浏览器本地存储中。当用户登录成功后，服务器会返回一个token，并将该token保存在浏览器本地存储中。在随后的请求中，客户端会将token添加到请求头中，以便服务器能够验证用户的身份。

token是有有效期的，一旦失效就需要重新获取新的token。为了方便处理这种情况，我们可以使用axios的request拦截器。在拦截器中，我们可以对每个请求进行统一处理，比如添加token、处理请求错误等。

使用方法

首先，我们需要安装axios库。我们可以通过以下命令安装axios：

npm install axios

安装完成后，我们就可以在代码中使用axios了。以下是一个使用axios进行网络请求的示例：

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在请求头中添加token
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');

  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 处理响应数据
  return response;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});

// 发送请求
instance.get('/api/users').then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});