vue项目在页面销毁前取消上一次接口请求

在 Vue 项目中，可以通过 Vue 的生命周期钩子函数 `beforeDestroy` 来取消上一次接口请求。在 `beforeDestroy` 钩子函数中，可以调用取消请求的方法，例如使用 Axios 的 `cancel` 方法来取消请求。

下面是一个示例代码：

import axios from 'axios';

export default {
  data() {
    return {
      request: null, // 保存请求的变量
    };
  },
  methods: {
    fetchData() {
      // 取消上一次请求
      if (this.request) {
        this.request.cancel('取消上一次请求');
      }
      
      // 发起新的请求
      this.request = axios.CancelToken.source(); // 创建 cancel token
      axios.get('/api/data', { cancelToken: this.request.token })
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          if (axios.isCancel(error)) {
            console.log('请求被取消', error.message);
          } else {
            console.log('请求发生错误', error);
          }
        });
    },
  },
  beforeDestroy() {
    // 在页面销毁前取消请求
    if (this.request) {
      this.request.cancel('组件销毁，取消请求');
    }
  },
};

在这个示例中，我们通过创建一个 CancelToken 对象来生成一个 cancel token，并将其传递给 Axios 的 `cancelToken` 配置项。当需要取消请求时，调用 `cancel` 方法，并传递取消原因。

在 `beforeDestroy` 钩子函数中，我们通过判断是否存在请求对象来决定是否取消请求。当组件即将销毁时，会调用 `beforeDestroy` 钩子函数，此时可以取消上一次的请求。

请注意，这里使用的是 Axios 库作为示例，实际项目中可能使用的是其他 HTTP 请求库，取消请求的方法可能会有所不同。具体使用方法请参考对应库的文档。