Axios 如何统一记录所有的请求调用？

在使用Axios进行API请求时，你可能希望对所有请求进行记录，以便进行调试、监控或审计。Axios提供了拦截器（interceptors），这是一种实现统一记录请求调用的非常有效的方式。拦截器允许我们在请求发送到服务器之前和从服务器收到响应之后，但在我们的代码处理响应之前，对它们进行处理。

以下是一个使用Axios拦截器来记录所有请求调用的示例：

javascript
import axios from 'axios';

// 创建一个记录函数，用于输出请求和响应信息
const logRequestResponse = (url, method, data, response) => {
  console.log(`[Request] ${method.toUpperCase()} ${url}`, data);
  console.log(`[Response]`, response);
};

// 创建Axios实例
const api = axios.create({
  baseURL: 'https://your.api/baseurl' // 假设的API基础URL
});

// 添加请求拦截器
api.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    // 比如可以在这里添加认证Token到headers
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 添加响应拦截器
api.interceptors.response.use(
  response => {
    // 任何位于2xx范围内的状态码都会触发该函数
    // 对响应数据做些事情
    logRequestResponse(response.config.url, response.config.method, response.config.data, response.data);
    return response;
  },
  error => {
    // 任何超出2xx范围的状态码都会触发该函数
    // 对响应错误做些事情
    if (error.response) {
      // 服务器返回了不在2xx的响应
      logRequestResponse(error.response.config.url, error.response.config.method, error.response.config.data, error.response.data);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error(`[Axios Error] No response:`, error.request);
    } else {
      // 发送请求时出了点问题
      console.error(`[Axios Error] General error:`, error.message);
    }
    return Promise.reject(error);
  }
);

// 使用api实例进行请求
api.get('/some-endpoint')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的代码示例中，我们首先定义了一个logRequestResponse函数，它会将请求的URL、方法、数据和响应记录到控制台。然后，我们创建了一个Axios实例并对其添加了请求和响应拦截器。在请求拦截器中，我们暂时没有做太多处理，只是将配置返回，实际情况下可以在这里添加身份验证token或者日志记录等。在响应拦截器中，我们调用logRequestResponse函数来记录请求和响应的详细信息。如果请求成功，我们记录响应数据；如果请求失败，我们根据错误的类型来记录不同的信息。

通过上述方法，所有通过这个Axios实例发出的请求都会被记录，这为我们提供了一个强大的工具来跟踪API的调用情况。

做到这一点的最好方法是拦截器。每个拦截器在请求/响应之前被调用。在这种情况下，日志拦截器就是。

shell
axios.interceptors.request.use(request => {
  console.log('Starting Request', JSON.stringify(request, null, 2))
  return request
})

axios.interceptors.response.use(response => {
  console.log('Response:', JSON.stringify(response, null, 2))
  return response
})

或类似的东西。

很高兴您使用 axios 的新实例：

shell
const api = axios.create({
  timeout: 1000
})

这样你就可以打电话

shell
api.interceptors[...]

使用axios-debug-log

1. npm install --save axios-debug-log
2. require('axios-debug-log')在任何 axios 调用之前
3. 设置环境变量DEBUG=axios

默认情况下，您将看到如下日志：

shell
  axios POST /api/auth/login +0ms
  axios 200  (POST http://localhost:8080/api/auth/login) +125ms
  axios POST /api/foo +0ms
  axios 200  (POST http://localhost:8080/api/foo) +15ms

请参阅文档了解配置和自定义选项。

看起来您可以使用“拦截器”拦截所有请求，并登录其中： https: //github.com/mzabriskie/axios#interceptors

使用axios-logger

当你在nodejs中发送请求时，需要将日志显示到控制台。

您可以尝试将axios.request函数包装在 Promise 中。

shell
function loggedRequest(config) {
  return new Promise((resolve, reject) => {
    axios.request(config)
    .then((res) => {
      // log success, config, res here
      resolve(res);      
    })
    .catch(err => {
      // same, log whatever you want here
      reject(err);
    })
  })
}