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

一、路由跳转的几种方式

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、题目:

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

2、解题:

在下面的代码中,intersection 函数接收两个数组 nums1nums2,以及它们的大小。函数会先对两个数组进行排序,然后找到它们的交集,并将唯一元素存储在 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;
}
相关推荐
I_Am_Me_1 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
yyt_cdeyyds2 分钟前
FIFO和LRU算法实现操作系统中主存管理
算法
雯0609~8 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ12 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z17 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
alphaTao28 分钟前
LeetCode 每日一题 2024/11/18-2024/11/24
算法·leetcode
程序猿进阶32 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
kitesxian37 分钟前
Leetcode448. 找到所有数组中消失的数字(HOT100)+Leetcode139. 单词拆分(HOT100)
数据结构·算法·leetcode
前端百草阁41 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜41 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript