【前端面试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、题目:

给定两个数组 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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/813279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web3 的社会影响:数字社会的新时代

随着科技的不断进步和创新&#xff0c;人类社会正逐步进入数字化时代的新阶段。Web3 技术作为数字社会的重要组成部分&#xff0c;正在以前所未有的方式重塑着我们的社会生活和交往方式。本文将探讨 Web3 技术对社会的影响&#xff0c;以及它所带来的数字社会的新时代。 1. Web…

JVM基础第一篇

内存结构 程序计数器 1.定义 在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;每个线程都有一个独立的程序计数器&#xff0c;它是线程私有的&#xff0c;不会被线程切换所影响。 2.作用 记住下一条jvm指令的执行地址 3.特点 是线程私有的不会存在内存溢出 虚拟机…

数据结构——单链表(C语言版)

文章目录 一、链表的概念及结构二、单链表的实现SList.h链表的打印申请新的结点链表的尾插链表的头插链表的尾删链表的头删链表的查找在指定位置之前插入数据在指定位置之后插入数据删除pos结点删除pos之后的结点销毁链表 三、完整源代码SList.hSList.ctest.c 一、链表的概念及…

【算法分析与设计】全排列

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给定一个不含重复数字的整数数组 nums &#xff0c;返回其 所有可能的全排列 。可以 按任意顺序 返回答案。 示例 示例 1&#xff1…

Transformer 结构浅析

Transformer 结构浅析 文章目录 Transformer 结构浅析Transformer 网络结构编码器位置编码多头注意力层Add&NormFeed Forward 解码器带掩码的多头注意力层多头注意力层 预测 Transformer 网络结构 Transformer模型的网络结构如图&#xff0c;且transformer结构主要分为两部…

二叉搜索树--搜索二维矩阵 II

题目描述 编写一个高效的算法来搜索 m * n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[10,…

HarmonyOS4 页面路由

Index.ets: import router from ohos.routerclass RouterInfo {// 页面路径url: string// 页面标题title: stringconstructor(url: string, title: string) {this.url urlthis.title title} }Entry // 入口組件 Component struct Index {State message: string 页面列表// …

react17+antd4 动态渲染导航菜单中的icon

在路由信息对照表中的icon可以有两种形式&#xff1a;一种是组件形式&#xff0c;一种是字符串形式的。 在antd4的Menu.Item和SubMenu中的icon属性的格式为&#xff1a; 1.组件形式 这种方法在渲染时很方便&#xff0c;与antd中的Menu.Item中的icon属性的形式是一致的&#…

计算机组成原理【CO】Ch2 数据的表示和应用

文章目录 大纲2.1 数制与编码2.2 运算方法和运算电路2.3 浮点数的表示和运算 【※】带标志加法器OFSFZFCF计算机怎么区分有符号数无符号数? 【※】存储排列和数据类型转换数据类型大小数据类型转换 进位计数制进制转换2的次幂 各种码的基本特性无符号整数的表示和运算带符号整…

微信小程序Skyline模式下瀑布长列表优化成虚拟列表,解决内存问题

微信小程序长列表&#xff0c;渲染的越多就会导致内存吃的越多。特别是长列表的图片组件和广告组件。 为了解决内存问题&#xff0c;所以看了很多人的资料&#xff0c;都不太符合通用的解决方式&#xff0c;很多需要固定子组件高度&#xff0c;但是瀑布流是无法固定的&#xf…

推荐一款轻量级的hosts文件编辑器(免安装版)

在管理和编辑hosts文件时&#xff0c;一款简单而有效的工具是非常重要的。下面推荐一款免安装版的轻量级hosts文件编辑器&#xff0c;让你轻松管理你的hosts文件。 windows系统默认hosts文件位置 下载地址&#xff1a;https://www.alipan.com/s/8kSns9eAi9f

CSS aspect-ratio属性设置元素宽高比

aspect-ratio 是CSS的一个属性&#xff0c;用于设置元素的期望宽高比。它设置确保元素保持特定的比例&#xff0c;不受其内容或容器大小的影响。 语法&#xff1a; aspect-ratio: <ratio>;其中 <ratio> 是一个由斜杠&#xff08;/&#xff09;分隔的两个数字&…

代码随想录第39天 | 62.不同路径 、 63. 不同路径 II

一、前言 参考文献&#xff1a;代码随想录 今天主要的题目是动态规划的路径问题&#xff0c;动态规划五要点&#xff1b; 1、确定dp数组&#xff0c;dp[i]代表什么i代表什么&#xff1b; 2、递推公式&#xff1b; 3、初始化dp数组&#xff1b; 4、遍历顺序&#xff1b; …

uniapp APP真机调试接口请求不到服务器解决方法

项目场景&#xff1a; 在使用Hbuilder开发uniapp的过程中&#xff0c;出现了两个在 Chrome 调试中正常&#xff0c;但打包后异常的问题&#xff0c;特此记录。 问题描述 在 H5 端请求接口正常请求。 App 端 请求接口&#xff0c;提示 "{"errMsg":"reque…

R语言数据可视化:基本绘图系统

目录 plot函数 par函数 hist函数 boxplot函数 plot函数应用实战 全局参数 R语言中有三大绘图系统包括基本绘图系统&#xff0c;Lattice绘图系统&#xff0c;ggplot2绘图系统 基本绘图系统 在R语言中&#xff0c;以下函数通常用于创建和定制图形&#xff1a; plot 函数…

网络通信三要素:IP、端口和协议

IP&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识 IP&#xff1a;全程”互联网协议地址“&#xff0c;是分配给上网设备的唯一标志 IP地址有两种形式&#xff1a; IPv4&#xff1a;32位 IPv6&#xff1a;共128位。分成8段表示&#xff0c;每取四位编码成一个16进制…

分布式技术---------------消息队列中间件之 Kafka

目录 一、Kafka 概述 1.1为什么需要消息队列&#xff08;MQ&#xff09; 1.2使用消息队列的好处 1.2.1解耦 1.2.2可恢复性 1.2.3缓冲 1.2.4灵活性 & 峰值处理能力 1.2.5异步通信 1.3消息队列的两种模式 1.3.1点对点模式&#xff08;一对一&#xff0c;消费者主动…

机器学习——模型评价

概述 在机器学习中&#xff0c;模型评价是评估和比较不同模型性能的关键步骤之一。它是通过对模型的预测结果与真实标签进行比较&#xff0c;从而量化模型的预测能力、泛化能力和稳定性。模型评价旨在选择最佳的模型&#xff0c;理解模型的行为&#xff0c;并为模型的改进提供…

Synchronized简述

1.了解Synchrozied Synchrozied是一种悲观锁&#xff0c;通过Synchroized实现同步机制&#xff0c;在操作数据时&#xff0c;判断该对象是否被锁定&#xff0c;如果被锁定则进入阻塞状态直到被占用的线程释放&#xff0c;如果没有被锁或者当前线程已经存在操作对象的锁则进行上…

SpringBoo利用 MDC 机制过滤出单次请求相关的日志

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1.前言 2.MDC 是什么 3.代码实战 4.总结 1.前言 在服务出现故障时&#xff…