【前端面试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;
}
相关推荐
Ocean☾几秒前
前端基础-html-注册界面
前端·算法·html
Rattenking1 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu3 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym8 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫9 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
顶呱呱程序9 分钟前
2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能
算法·matlab·音视频·matlab-gui·音频滤波·脉冲响应不变法
~甲壳虫13 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat14 分钟前
前端性能优化2
前端
爱吃生蚝的于勒30 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
羊小猪~~34 分钟前
数据结构C语言描述2(图文结合)--有头单链表,无头单链表(两种方法),链表反转、有序链表构建、排序等操作,考研可看
c语言·数据结构·c++·考研·算法·链表·visual studio