javascript - vue如何实现公共拦截器前面加一个接口请求？

Question

如何实现在vue封装的公共接口请求前面再加一个请求？

需求的场景是这样的，前端在调用后台接口的时候，在验证时间戳的时候发现前端获取的本地时间戳和后台的对应不上，那么为了解决这个问题，后台提出的方案是前端每请求一个接口前，先调一次获取后台时间戳的接口，然后等接口返回时间戳后再将该时间戳放到需要请求的接口参数里面去参与验证...

我尝试了在公共拦截器里面config前面加了一个原生请求，代码思路大概如下图所示：

但是运行起来会报错，报错的信息是在axios组件里面打印的，大致就是config这个对象是个undefined。正常请求config是公共拦截器里面return过去的那个config对象

Answer 1

axios.interceptors.request.use(config => {  return new Promise((resolve, reject) => {    fetch(`${process.env.VUE_APP_BASE_API}/time`)    .then(response => response.json())    .then(myJson => {      config.headers['X-Timestamp'] = myJson.timestamp; // 设时间戳的字段是'timestamp'            resolve(config);    }).catch(error => {            reject(error);    });  });}, error => {    return Promise.reject(error);});

Answer 2

前端发送请求时候获取时间戳，http传到后端，考虑到网络的原因，应该会有多少毫秒的误差。你们后台设置一个阈值。如果差值过来。不知道你们想干啥？

Answer 3

用async/await语法写

Answer 4

看起来你试图在 Vue 的 Axios 拦截器中添加一个请求，以获取后台时间戳，然后在其他请求的配置中包含这个时间戳。

你的问题似乎是在拦截器中访问 Axios 配置时遇到问题，具体来说，你试图访问一个未定义的 config 对象。

你的代码截图中缺少了一些关键部分，所以我不能直接看到你的具体实现。但是，根据你的描述，我可以给你一些通用的建议。

首先，确保你的拦截器正确地接收和返回 Axios 配置。下面是一个基本的 Axios 拦截器示例，它可以在请求被发送之前做一些预处理：

axios.interceptors.request.use(function (config) {    // 在发送请求之前做些什么    // 例如，你可以在这里添加一个获取后台时间戳的请求    return new Promise((resolve, reject) => {        axios.get('/api/timestamp')            .then(response => {                // 将时间戳添加到配置对象中                config.headers.timestamp = response.data;                resolve(config);            })            .catch(error => {                reject(error);            });    });}, function (error) {    // 对请求错误做些什么    return Promise.reject(error);});

在这个示例中，我使用了一个 Promise 来处理获取后台时间戳的异步操作，并在获取到时间戳后将其添加到请求配置中。如果获取时间戳的请求失败，我简单地拒绝了原始的错误。

然后，你可以在其他地方使用 Axios 发送请求，并利用配置对象中的时间戳进行验证。例如：

axios.post('/api/some-endpoint', data, {    headers: {        timestamp: config.headers.timestamp,  // 使用从拦截器中获取的时间戳    }}).then(response => {    // 处理响应数据}).catch(error => {    // 处理错误});

希望这些信息能帮到你！如果你有更多的代码或更具体的错误信息，我可以提供更具体的帮助。