Axios中的拦截器与GET/POST请求比较(同步与异步请求)#

前端

2024-02-12 08:09:16

拦截器：强大的工具，增强 Axios 请求和响应

1. 拦截器简介

拦截器是一个拦截和修改请求或响应的方法，在 Axios 中，拦截器可在以下方面发挥作用：

在发送请求前，添加或修改请求头和请求数据。
在接收响应后，处理或修改响应数据。

2. 使用拦截器

在 Axios 中使用拦截器很简单，只需调用 axios.interceptors.request 和 axios.interceptors.response 方法。

代码示例：

// 添加一个请求拦截器
axios.interceptors.request.use(config => {
  // 发送请求前执行操作
  return config;
});

// 添加一个响应拦截器
axios.interceptors.response.use(response => {
  // 接收响应后执行操作
  return response;
});

3. GET 和 POST 请求：异曲同工

GET 和 POST 都是 HTTP 协议中的常见请求方法，它们的区别在于：

GET 请求： 获取服务器数据，数据附加在 URL 后以查询字符串形式发送。
POST 请求： 向服务器发送数据，数据放在请求体中发送。

4. 同步与异步请求：泾渭分明

同步请求： 发送请求后，浏览器会等待服务器响应再继续执行。
异步请求： 发送请求后，浏览器会继续执行代码，不等待服务器响应。

5. 拦截器实例：应用场景

代码示例：

// 实例代码 1：使用拦截器添加请求头
axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer ' + token;
  return config;
});

// 实例代码 2：使用拦截器处理响应数据
axios.interceptors.response.use(response => {
  response.data = response.data.data;
  return response;
});

// 实例代码 3：使用拦截器发送 GET 请求
axios.get('/user').then(response => {
  console.log(response.data);
});

// 实例代码 4：使用拦截器发送 POST 请求
axios.post('/user', { name: 'John Doe' }).then(response => {
  console.log(response.data);
});