舟山建设工程信息网站,一个虚拟空间做两个网站,网站建设的目标定位,女教师遭网课入侵视频目录
注意#xff1a;
1、Axios实现
2、Fetch实现
3、XHR实现 注意#xff1a; 当请求被取消时#xff0c;只会本地停止处理此次请求#xff0c;服务器仍然可能已经接收到了并处理了该请求。开发时应当及时和后端进行友好沟通。 1、Axios实现
!DOCTYPE html1、Axios实现
2、Fetch实现
3、XHR实现 注意 当请求被取消时只会本地停止处理此次请求服务器仍然可能已经接收到了并处理了该请求。开发时应当及时和后端进行友好沟通。 1、Axios实现
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodybutton onclickgetData()获取数据/buttonbutton onclickcancel()取消请求/buttonscript srchttps://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js/scriptscript// 创建一个取消令牌const CancelToken axios.CancelToken// 用于存储取消函数let cancelFn nullfunction getData() {// 发起请求axios.get(http://127.0.0.1:3000/data, {cancelToken: new CancelToken(function executor(c) {cancelFn c // 保存取消函数}),}).then(response {// 请求成功时处理响应console.log(拿到数据:, response.data)}).catch(error {// 处理错误if (axios.isCancel(error)) {// 如果是取消请求的错误输出相关信息console.log(请求已取消:, error.message)} else {// 处理其他类型的请求错误console.error(请求失败:, error)}})}function cancel() {// 调用取消函数传入取消的原因cancelFn cancelFn(取消请求) // 取消请求}/script/body
/html2、Fetch实现
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodybutton onclickgetData()获取数据/buttonbutton onclickcancel()取消请求/buttonscriptlet controller nullfunction getData() {// 创建一个AbortController实例controller new AbortController()// 发起请求fetch(http://127.0.0.1:3000/data, { signal: controller.signal }).then(response {if (!response.ok) {throw new Error(获取数据失败)}return response.json()}).then(data {console.log(data)}).catch(error {if (error.name AbortError) {console.log(Fetch请求已取消)} else {console.error(Fetch请求错误:, error)}})}function cancel() {controller controller.abort() // 取消请求}/script/body
/html3、XHR实现
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodybutton onclickgetData()获取数据/buttonbutton onclickcancel()取消请求/buttonscriptlet xhr nullfunction getData() {// 创建一个新的 XMLHttpRequest 对象xhr new XMLHttpRequest()// 配置请求xhr.open(GET, http://127.0.0.1:3000/data, true)// 定义回调函数xhr.onload function () {if (xhr.status 200 xhr.status 300) {console.log(响应结果:, xhr.responseText)} else {console.error(响应失败:, xhr.status)}}xhr.onerror function () {console.error(请求失败)}// 发送请求xhr.send()}function cancel() {xhr xhr.abort() // 取消请求}/script/body
/html
