axios 拦截请求添加参数

如何实现axios拦截请求添加参数

1. 整体流程

首先，我们需要明确整个实现过程的流程，可以用以下表格展示：

步骤	描述
1	创建axios实例
2	添加请求拦截器
3	修改请求参数

2. 每步操作及代码示例

步骤 1：创建axios实例

首先，我们需要创建一个axios实例，可以使用以下代码：

登录后复制

```javascript
import axios from 'axios';

const instance = axios.create({
  baseURL: '
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

这段代码会创建一个名为instance的axios实例，设置了请求的基本URL为`

步骤 2：添加请求拦截器

接下来，我们需要在axios实例中添加请求拦截器，用于在发送请求前修改参数。下面是实现代码示例：

登录后复制

```javascript
instance.interceptors.request.use((config) => {
  // 在请求发送前做一些处理
  config.params = {
    ...config.params,
    key: 'value'
  };
  return config;
}, (error) => {
  return Promise.reject(error);
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

这段代码会在请求发送前将key: 'value'参数添加到请求参数中。

步骤 3：修改请求参数

最后，我们可以直接使用instance发送请求，拦截器会自动添加参数。示例代码如下：

登录后复制

```javascript
instance.get('/api/data', {
  params: {
    id: 1
  }
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

在这段代码中，我们发送了一个GET请求到/api/data，拦截器会自动将key: 'value'添加到参数中。

3. 状态图

4. 流程图

通过以上步骤，你可以成功实现在axios拦截请求添加参数的功能。希望对你有所帮助，祝学习顺利！

原创作者: u_16175509 转载于: https://blog.51cto.com/u_16175509/11372201