【前端面试3+1】14 路由跳转的方式、如何取消已经发送的ajax请求、如何按顺序发起三个ajax请求并按顺序返回、【两个数组的并集】

news2024/10/6 16:18:50

一、路由跳转的几种方式

1、页面跳转

使用超链接 <a> 标签：通过在页面中定义超链接，用户点击超链接后会跳转到指定的URL页面。
使用重定向：服务器端可以通过设置HTTP响应头中的Location字段，将用户重定向到指定的URL页面。
使用表单提交：用户在表单中填写内容后提交，服务器端可以根据表单内容返回不同的页面。

2、JavaScript跳转

使用window.location对象：通过设置window.location.href属性实现页面跳转。
使用window.location.replace()方法：替换当前页面的URL，不会产生历史记录。
使用window.location.assign()方法：加载新的文档，会在浏览器的历史记录中生成一条记录。

3、路由框架跳转

在前端框架中，如React、Vue、Angular等，通常会使用路由库来管理页面之间的跳转，比如React中的React Router、Vue中的Vue Router等。

4、服务器端路由跳转

在服务器端应用中，可以根据请求的URL路径来决定返回哪个页面，实现路由跳转。

二、如何取消已经发送的AJAX请求？

1、使用XMLHttpRequest对象时：

在使用原生的 XMLHttpRequest 对象发送 AJAX 请求时，可以调用 abort() 方法来取消请求。例如：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'url', true);
xhr.send();

// 取消请求
xhr.abort();
2、使用Fetch API时：

使用 Fetch API 发送 AJAX 请求时，可以使用 AbortController 和 AbortSignal 来取消请求。例如：
const controller = new AbortController();
const signal = controller.signal;

fetch('url', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 取消请求
controller.abort();
3、使用库或框架提供的取消方法：

如果你使用的是像 Axios、jQuery.ajax 等库或框架来发送 AJAX 请求，通常这些库会提供取消请求的方法。

使用 Axios 发送请求后，可以通过 CancelToken 来取消请求。
import axios from 'axios';

// 创建一个取消令牌
const source = axios.CancelToken.source();

// 发送请求
axios.get('url', {
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.log(error);
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');
使用 jQuery.ajax 发送请求后，可以通过 jqXHR 对象的 abort() 方法来取消请求。
const jqXHR = $.ajax({
  url: 'url',
  type: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.log('Error:', errorThrown);
  }
});

// 取消请求
jqXHR.abort();
4、管理请求的标识：

在发送 AJAX 请求时，可以为每个请求设置一个唯一的标识（如请求ID），然后在取消请求时根据这个标识来识别并取消对应的请求。

三、如何按顺序发起三个ajax请求，并按顺序返回

可以使用 Promise 和 async/await 来按顺序发起多个 AJAX 请求，并按顺序处理返回的数据。下面是一个使用 async/await 的示例代码，演示了如何按顺序发起三个 AJAX 请求并按顺序处理返回的数据：
// 创建一个函数用于发送 AJAX 请求
function sendRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network Error'));
    };
    xhr.send();
  });
}

// 使用 async/await 发起三个 AJAX 请求并按顺序处理返回的数据
async function fetchDataInOrder() {
  try {
    // 发起第一个请求并处理返回的数据
    const data1 = await sendRequest('url1');
    console.log('Data 1:', data1);

    // 发起第二个请求并处理返回的数据
    const data2 = await sendRequest('url2');
    console.log('Data 2:', data2);

    // 发起第三个请求并处理返回的数据
    const data3 = await sendRequest('url3');
    console.log('Data 3:', data3);

    // 所有请求都处理完毕
    console.log('All requests completed');
  } catch (error) {
    console.error('Error:', error);
  }
}

// 调用函数开始按顺序发起请求
fetchDataInOrder();
在上面的示例中，我们定义了一个 sendRequest 函数用于发送单个 AJAX 请求，并返回一个 Promise 对象。然后使用 async/await 创建了一个名为 fetchDataInOrder 的函数，该函数按顺序发起三个 AJAX 请求，并使用 await 关键字等待每个请求的返回结果。当所有请求都处理完毕时，会输出 "All requests completed"。

通过以上方法，可以确保按顺序发起多个 AJAX 请求，并在每个请求返回后按顺序处理数据，而不会出现并发请求导致的顺序混乱问题。

四、【算法】两数组的交集

1、题目：

给定两个数组 nums1 和 nums2 ，返回 它们的交集
输出结果中的每个元素一定是唯一的。我们可以 不考虑输出结果的顺序 。

2、解题：

在下面的代码中，intersection 函数接收两个数组 nums1 和 nums2，以及它们的大小。函数会先对两个数组进行排序，然后找到它们的交集，并将唯一元素存储在 result 数组中。最后，返回交集数组的指针，并通过 returnSize 返回数组的大小。在 main 函数中，我们演示了如何调用 intersection 函数来找到示例中两个数组的交集并打印结果。
/**
 * Note: The returned array must be malloced, assume caller calls free().
 */
 // 比较函数，用于排序和去重
int compare(const void *a, const void *b) {
    return (*(int*)a - *(int*)b);
}
int* intersection(int* nums1, int nums1Size, int* nums2, int nums2Size, int* returnSize) {
       // 先对两个数组进行排序
    qsort(nums1, nums1Size, sizeof(int), compare);
    qsort(nums2, nums2Size, sizeof(int), compare);
    
    int* result = (int*)malloc(sizeof(int) * (nums1Size > nums2Size ? nums1Size : nums2Size));
    int index = 0;
    
    // 找到交集并存储到result数组中
    int i = 0, j = 0;
    while (i < nums1Size && j < nums2Size) {
        if (nums1[i] < nums2[j]) {
            i++;
        } else if (nums1[i] > nums2[j]) {
            j++;
        } else {
            if (index == 0 || result[index - 1] != nums1[i]) {
                result[index++] = nums1[i];
            }
            i++;
            j++;
        }
    }
    
    *returnSize = index;
    return result;
}