接口请求重复调用，只保留最后一个请求的返回结果

在前端开发中，有时候我们需要确保即使发起了多次相同的请求，也只处理最后一次请求的响应。这种需求在搜索输入提示、自动完成或者连续的数据更新操作中比较常见。

为了实现这个功能，我们可以使用取消之前请求的策略，或者通过标记的方式来确保只处理最后一次请求的结果。以下是使用JavaScript实现这一功能的两种方法：

fetch：使用AbortController

AbortController 是一个原生的API，可以用来取消一个或多个Web请求。这个API在现代浏览器中普遍支持。

let currentController = null;

function fetchWithAbort(url) {
  // 如果之前的请求还未完成，则取消它
  if (currentController) {
    currentController.abort();
  }

  // 创建一个新的AbortController
  currentController = new AbortController();
  const { signal } = currentController;

  // 发起请求
  fetch(url, { signal })
    .then(response => response.json())
    .then(data => {
      console.log('请求成功:', data);
      // 请求完成后，清除controller
      currentController = null;
    })
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('请求被取消:', url);
      } else {
        console.error('请求失败:', error);
      }
      // 请求失败后，清除controller
      currentController = null;
    });
}

// 使用
fetchWithAbort('api/data');
fetchWithAbort('api/data'); // 这个请求会取消上一个请求

axios：使用标记变量

在使用axios进行接口请求时，如果想要保留最后一个返回结果，可以通过取消前一个请求的方式来实现。axios提供了取消请求的功能，你可以使用CancelToken来取消请求。

以下是一个使用axios实现保留最后一个返回结果的示例代码：

import axios from 'axios';

// 创建一个变量用于存储每次请求的cancel函数
let cancel;

// 封装请求方法
function fetchApi(url, params) {
  // 检查是否存在前一个请求的cancel函数，如果存在则取消前一个请求
  if (cancel !== undefined) {
    cancel();
  }

  // 创建新的CancelToken
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();

  // 将新的cancel函数赋值给cancel变量，以便下次请求时使用
  cancel = source.cancel;

  // 发起请求
  return axios.get(url, {
    cancelToken: source.token, // 设置cancel token
    params: params
  }).then(response => {
    // 请求成功，返回数据
    return response.data;
  }).catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      // 处理其他错误
      console.error('Request failed', error);
    }
  });
}

// 使用封装的请求方法
fetchApi('/api/data', { query: 'example' }).then(data => {
  console.log(data);
});

在上面的代码中，每次调用fetchApi函数时，都会检查是否存在前一个请求的cancel函数，如果存在，则调用它来取消前一个请求。然后，创建一个新的CancelToken并将其传递给axios请求。这样，每次请求都只会保留最后一个返回结果，之前的请求都会被取消。