Vue.js 是一个用于构建用户界面的渐进式框架，在前端开发中，我们经常需要获取 header 里面的值，token、user-id 等，本文将介绍如何在 Vue.js 中获取 header 里面的值。
1. 基本概念
在 HTTP 请求中，header 是包含有关请求或响应的元数据的信息，当我们向服务器发送一个登录请求时，服务器可能会返回一个包含 token 的 header，我们需要在 Vue.js 中获取这个 token，以便在后续的请求中使用它。
2. 使用 axios 获取 header 里面的值
axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js，在 Vue.js 项目中，我们可以使用 axios 来发送 HTTP 请求，当请求成功时，我们可以从响应对象中获取 header 的值。
确保已经安装了 axios：
npm install axios
在 Vue.js 项目中引入 axios：
import axios from 'axios';
接下来，我们可以使用 axios 发送一个请求，并在请求成功后获取 header 的值：
axios.get('https://api.example.com/data')
.then(response => {
const token = response.headers['token']; // 获取 token
console.log('Token:', token);
})
.catch(error => {
console.error('Error:', error);
});
3. 使用 fetch API 获取 header 里面的值
除了使用 axios，我们还可以使用原生的 fetch API 来发送 HTTP 请求，fetch API 返回一个 Promise，我们可以使用它来处理请求的结果，同样，我们可以从响应对象中获取 header 的值。
确保已经安装了 axios：
npm install axios
在 Vue.js 项目中引入 axios：
import axios from 'axios';
接下来，我们可以使用 fetch API 发送一个请求，并在请求成功后获取 header 的值：
fetch('https://api.example.com/data')
.then(response => {
const token = response.headers.get('token'); // 获取 token
console.log('Token:', token);
})
.catch(error => {
console.error('Error:', error);
});
4. 使用 interceptors（拦截器）获取 header 里面的值
为了更方便地获取 header 的值，我们可以使用 axios 的 interceptors（拦截器），拦截器可以在请求或响应被处理之前执行一些操作，我们可以在拦截器中获取 header 的值，并将其存储在全局变量中，这样，我们就可以在项目的任何地方访问这些值。
安装 axios：
npm install axios
在 Vue.js 项目中引入 axios：
import axios from 'axios';
接下来，创建一个 axios instance：
const instance = axios.create();
现在，我们可以创建一个拦截器来获取 header 的值：
instance.interceptors.request.use(config => {
const token = config.headers['token']; // 获取 token
if (token) {
config.headers['Authorization'] = Bearer ${token}; // 如果存在 token，将其添加到请求头中
} else {
delete config.headers['Authorization']; // 如果不存在 token，删除请求头中的 Authorizaion
}
return config; // 返回修改后的 config
}, error => {
return Promise.reject(error); // 如果请求失败，返回错误信息
});
我们可以使用这个实例来发送请求：
instance.get('https://api.example.com/data')
.then(response => {
console.log('Data:', response.data); // 输出数据内容
console.log('Headers:', response.headers); // 输出响应头信息，包括 token（如果存在）
})
.catch(error => {
console.error('Error:', error); // 如果请求失败，输出错误信息
});
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/234190.html
微信扫一扫 