axios拦截器添加请求头

我不吃洋葱啊

于 2024-08-17 03:56:05 发布

阅读量68

点赞数

使用 Axios 拦截器添加请求头的实现

在现代前端开发中，使用 axios 发送网络请求是非常常见的需求。为了在每个请求中添加通用的请求头，例如身份验证令牌或其他自定义信息，我们可以利用 Axios 的拦截器功能。本文将详细解释如何实现这一功能，并以清晰的步骤和代码示例帮助您理解。

处理流程概述

以下是使用 Axios 拦截器添加请求头的基本步骤：

步骤	描述
1	安装 Axios
2	创建 Axios 实例
3	使用 Axios 拦截器添加请求头
4	发送请求并观察效果
5	处理响应和错误

接下来我们将一一解释每个步骤。

第一步：安装 Axios

首先，您需要确保您的项目中已经安装了 Axios。您可以通过 npm 或 yarn 来安装它：

或者：

提示: 确保您在项目目录下执行上面的命令，这将 Axios 添加到您的项目中。

第二步：创建 Axios 实例

接下来，您需要创建一个 Axios 实例，这样可以对请求的默认配置进行设置。

import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
    baseURL: ' // 这里替换为您的 API 基础地址
    timeout: 10000, // 请求超时时间，单位为毫秒
});

说明: 在上面的代码中，我们导入了 Axios，并创建了一个实例 instance，同时设置了基础 URL 和请求超时设置。

第三步：使用 Axios 拦截器添加请求头

在 Axios 实例中，我们可以添加请求拦截器，以便在每次发送请求之前修改请求配置，包括添加请求头。

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 在请求头中添加令牌
        const token = 'YOUR_ACCESS_TOKEN'; // 替换为您的实际令牌
        config.headers['Authorization'] = `Bearer ${token}`; // 添加 Authorization 请求头
        return config; // 必须返回配置，以便请求继续发送
    }, 
    error => {
        // 处理请求错误
        return Promise.reject(error);
    }
);

说明:

interceptors.request.use 方法的第一个参数是一个函数，它会在请求发送之前被调用，并接收请求配置 config 作为参数。
在这个函数中，我们可以直接修改请求头，例如添加 Authorization 头。
必须返回 config，以便请求能够继续进行。第二个参数用于处理请求错误。

第四步：发送请求并观察效果

添加拦截器后，您可以使用此 Axios 实例发送请求，并观察是否成功添加了请求头。

// 发送 GET 请求
instance.get('/some-endpoint')
    .then(response => {
        console.log('响应数据:', response.data);
    })
    .catch(error => {
        console.error('请求出错:', error);
    });

说明: 在这里，我们调用了 instance.get 方法发送 GET 请求。通过 console.log，我们可以监控响应数据并检测任何错误。

第五步：处理响应和错误

在处理请求和响应时，我们也可以添加响应拦截器，以便在接收到响应时进行处理。例如，可以提取数据或处理错误。

// 响应拦截器
instance.interceptors.response.use(
    response => {
        // 处理响应数据
        return response.data; // 直接返回响应数据
    }, 
    error => {
        // 处理响应错误
        console.error('响应错误:', error.response);
        return Promise.reject(error);
    }
);