先是JavaScript fetch，然后是innerHTML问题 - 腾讯云开发者社区

文章/答案/技术大牛

发布

JavaScript——promise 是解决异步问题的方法嘛

前言 promise 异步解决方案步骤 Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。...Promise解决了callback回调地狱的问题，async、await 是异步的终极解决方案。...来看一下JavaScript中异步方案 1）回调函数（callback） setTimeout(() => { // callback 函数体 }, 1000) 缺点：回调地狱，不能用 try...) let result1 = it.next() let result2 = it.next() let result3 = it.next() 4）Async/await async、await 是异步的终极解决方案...('XXX1') await fetch('XXX2') await fetch('XXX3') }

3471 0

从一个前端开发者的视角，聊聊“新上网导航”的技术取舍（含代码浅析）

首先是关于“轻量”的实践。首先是首屏加载速度非常快，二次访问更是做到了毫秒级加载。通过审查元素可以发现，它在资源加载上做了极致的克制。...正确的做法是使用防抖。...我们可以这样模拟它的实现：// 假设这是获取联想词的APIfunction fetchSuggestions(keyword) { // 实际场景中，这里会是一个 fetch 或 axios 请求...这种架构选择很聪明：主体导航部分保持静态，利用CDN缓存实现极速访问；而资讯这类时效性强的模块，则通过客户端JavaScript异步获取数据。...它没有盲目追求功能的“大而全”，而是聚焦于“导航”这一核心场景，用最合适、最轻量的技术方案去解决实际问题。

1342 1

您找到你想要的搜索结果了吗？

是的

没有找到

在 JavaScript 中通过 queueMicrotask() 使用微任务

任务 vs 微任务为了正确地讨论微任务，首先最好知道什么是一个 JavaScript 任务以及微任务如何区别于任务。...滥用这种能力将带来性能问题。入列微任务就其本身而言，应该使用微任务的典型情况，要么只有在没有其他办法的时候，要么是当创建框架或库时需要使用微任务达成其功能。...= data; this.data = data; this.dispatchEvent(new Event("load")); )}; } }; 这段代码带来的问题是...当微任务运行之时，等待它处理的可能是一个有若干条消息的数组。微任务函数先是通过 JSON.stringify() 方法将消息数组编码为 JSON。...let logElem = document.getElementById("log"); let log = s => logElem.innerHTML += s + ""; 以下是主程序代码

4.6K1 0

vue的两种路由模式

localhost:5001端口进行调试，比如我的nginx根目录是：D:\phpstudy_pro\Extensions\Nginx1.15.11，就在这里新建一个hashDeom夹，然后再在里面新建...gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript...gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript...= '当前是网站首页' view.innerHTML = location break;...区别共同点：都可通过改变路由(地址栏)而不刷新页面不同点：显示问题，hash会在地址栏上带#号，而history不会 history可以通过pushState可以添加任意类型数据和title到记录中

2.3K1 0

盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小

; } 在上面代码中，首先是创建秒杀结束时间，利用Date对象的getTime()方法分别获取结束秒杀的时间和当前时间的毫秒数。...JavaScript function jump(sec,url){ var sec=document.getElementById("sec").innerHTML=-...this.style.height = '100px'; this.innerHTML = '小盒子'; } }; 在上面代码中，首先是使用document.getElementById...本文案例参考《JavaScript前端开发案例教程》，黑马程序员编著四、总结 1.本文基于JavaScript基础，实现限时秒杀、定时跳转、改变盒子大小的功能。...将文中的代码块组织在一起，就是给个案例的完整代码了，小编在这里就不单独提供代码文件啦，记得添加小编微信，有问题可以随时联系小编进行解决哈~ ------------------- End -------

6.1K2 0

什么年代还在用传统 Pjax? —— 自定义 Pjax 提升页面加载速度

最重要的是，Hexo 是静态博客，这一点只能在生成文件时进行。载入 HTML 我是用 Cheerio 模块帮我完成这一工作。...filename.endsWith(".html")) { return false; } } 然后通过 Cheerio 解析 HTML: {... // 组合新文件名...然后获取页面的标题和 #page-main 下的 HTML. {... // 页面标题 rtData.title = $pg("title").text(); // OR $pg("#...) { let thisLink = new URL(i.href).pathname+new URL(i.href).hash; i.href = `javascript...执行 JavaScript 方面使用 eval() 函数。

3.3K2 0

pwa-之service worker 基本概念

我们作为资源引用的是JavaScript文件，CSS文件，图像和一些字体。这将有助于我们加快加载时间，而不必每次访问同一网站时都必须从服务器获取。..., e); }); self.addEventListener('activate', function(e) { console.log('Activate Event:', e); }); 然后页面如下显示...Fetch 在当前scope作用域下面的请求会触发fetch事件 Terminate 这个事件可能会发生在任何时候，主要后果就是需要浏览器做service worker的内存回收。...', function(event) { // Always fetch response from the network event.respondWith( fetch...worker里面我们配置的响应处理请求超时请求超时有可能是网络连接的问题，service worker是解决这类问题的理想方案。

1.3K3 1

有关跨域请求的一些记录

开始官方定义，CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript...以我目前的能力可以有两个方案来解决此问题：使用动态语言来获取数据后再返回转发此请求，为我所用如果使用此方案的话，比较常见的是使用nginx来处理。.../cors_header_proxy.js>这个脚本主要功能是为了解决跨域问题，并且写了转发请求和原始请求的对比，我直接写注释以阐述我的理解与想法。.../Using_Fetch#Checking_that_the_fetch_was_successful'>Shows TypeError: Failed to fetch since CORS is misconfigured...= JSON.stringify(data) } catch (e) { document.getElementById(reqName).innerHTML = e } }

2.2K5 0

「原生案例」如何在JavaScript中实现实时搜索功能

在API页面中，我们选择要使用的特定数据，然后复制页面右侧提供的javascript(fetch)代码，如下所示： https://rapidapi.com/rapihub-rapihub-default...然后，我们将把电影卡片放在 resultsContainer 元素中。...在这种情况下，这些情景可能发生在搜索查询没有结果或API请求存在问题时。处理错误或空响应时，向用户提供清晰的反馈是至关重要的。...如果是这种情况，我们将通过调用 fetch 函数向API发出新的请求。另一方面，如果缓存数据存在且尚未过期，我们将使用它来渲染页面上的电影，而不是再次发出新的 fetch 请求。...以下是该应用程序的整体JavaScript代码： const url = "https://imdb-top-100-movies.p.rapidapi.com/"; const options = {

2.6K4 0

pwa-之service worker 离线文件处理

本章包含以下知识点显示离线页面加载离线图片加载离线css 多个fetch处理事件调用简介网站图片由于不确定的原因，可能无法访问，这给用户一个错觉，就是你的网站出了问题其他诸如css,js文件都是网站必不可少的资源...当网络不通时，html请求走到cache方法里面去，然后响应的是缓存好的offline.html。offline.html又请求已经缓存好的offline.svg。所以正常显示。...function(event) { event.respondWith(caches.match(event.request)); }); 访问/Chapter%202/02/index.html，然后打开...一定要访问index.html啊，不然不会成功多个fetch事件调用 fetch事件和js其他事件一样都是可以注册多次的。创建index.html 然后访问/cook/,是/cook/不是/cook ? 访问/cook/book ?

7382 0

如何简单理解 JavaScript 的 Async 和 Await？

，笔者在保证不改变原意的基础上做了调整，并在此基础上进行了错误校正，如发现问题，欢迎你的指正开篇自从Async 和Await 出现后，大幅简化JavaScript 同步和非同步（异步）的复杂纠葛，这篇文章将会分享我自己理解的历程...在JavaScript的世界，同步sync和非同步async的爱恨情仇，就如同偶像剧一般的剪不断理还乱，特别像是setTimeout、setInterval、MLHttpRequest或fetch这些同步非同步混杂的用法...这个容易出错的非同步等待，针对 setInterval ，也能用同样的做法修改，举例来说，下面的代码码执行之后，并「不会」如我们预期的「先显示1，再显示 haha0...haha5 ，最后再显示2」，而是「先显示1和2，然后再出现...这避免了额外的序列化步骤，使其比直接innerHTML操作更快。...04 搭配Fetch 在上篇的文章 JavaScript Fetch API 使用教学已经有提到 fetch 的用法，因为 fetch 最后回传的是promise，理所当然的通过 async 和await

1.7K2 0

【JavaScript】解决 JavaScript 语言报错：Uncaught TypeError: Cannot read property ‘X‘ of null

一、背景介绍在 JavaScript 编程中，“Uncaught TypeError: Cannot read property ‘X’ of null” 是一种常见的错误。...Cannot read property ‘X’: 这里的 ‘X’ 是具体的属性名称。错误信息指示无法读取该属性。 of null: 这是关键部分，表明代码试图访问的对象是 null。...DOM 元素未正确选择 let element = document.getElementById('nonexistent'); console.log(element.innerHTML); //...console.log(obj.property); // value 六、总结 “Uncaught TypeError: Cannot read property ‘X’ of null” 错误在 JavaScript...以下几点是需要特别注意的： DOM 元素检查：确保在操作 DOM 元素前，已正确选择。异步操作的空值检查：在处理异步操作结果时，检查返回的数据是否为 null 或未定义。

3K1 0

【技术创作101训练营】innerHTML插入运行js字符串问题探究

最近改了一个老项目, 里面的页面请求大部分是通过ajax请求后来渲染的jsp页面, 然后再用innerHTML插入到当前页....但是这就遇到了一个问题, jsp里引入的js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js的一些方法 1. innerHTML介绍有两个功能, 一个是可以获取指定DOM...的HTML元素, 另一个就是替换指定DOM的HTML元素 2. innerHTML插入js会发生什么什么也不会发生, 因为用 innerHTML 插入文本到网页中有可能成为网站攻击的媒介，从而产生潜在的安全风险问题...对于实际来说, 我认为存在问题, 所以搜索了其他资料来解决问题 3....string> = html.split(//i) let scripts: Array<{ text: string, src: string }> = [] 然后是循环分割的

1.3K0 0

Memos API 调用渲染页面

creatorId=101&rowStatus=NORMAL&limit=10 creatorId - 这是用户ID，以前创建的实例 ID 是101，新版本创建的实例 ID 是1 HTML代码如果是集成到自己的网站...javascript" src="assets/js/APlayer.min.js"> javascript...qs_dom = document.querySelector(qs_href) qs_dom.parentNode.replaceChild(db_div, qs_dom); db_div.innerHTML...qs_dom = document.querySelector(qs_href) qs_dom.parentNode.replaceChild(db_div, qs_dom); db_div.innerHTML...整体样式是自己慢慢捏出来的，大多借鉴了 Twitter 的元素。

3.9K3 0

调用DeepSeek API增强版纯前端实现方案，支持文件上传和内容解析功能

实现方案文件上传文件上传是调用DeepSeek API的第一步。...JavaScript文件处理通过JavaScript获取用户选择的文件...以下是实现内容解析的关键步骤：获取文件ID文件上传成功后，API会返回一个文件ID，用于后续的解析操作。...--> 问题...question) { alert('请输入问题！')

2.6K2 0

带你深入了解 Module

很长一段时间以来，JavaScript都没有语言级的模块语法。这不是问题，因为最初的脚本很小很简单，所以没有必要。...因此，我们将从现在开始学习现代JavaScript模块。什么是模块模块只是一个文件。一个脚本就是一个模块。就这么简单。...首先是undefined，然后是object。这是因为模块被延迟了，所以我们等待文档被处理。常规脚本立即运行，所以我们首先看到它的输出。...它执行导入(fetch ./analytics.js)并在准备好时运行，即使HTML文档还没有完成，或者其他脚本仍在等待中。...这样的模块是不允许导入的。

1.3K2 0

前端复盘: iframe跨页通信和前端实现文件下载

由于笔者2年前维护了几个比较老的项目是用jquery全家桶开发的，其中有些需求是需要跨页面交互和父子页面通信，故借此总结一下。...另一块是前端实现文件下载功能，虽然方法很多，为了不用重复造轮子，在此还是总结一波，毕竟多页面下的应用场景还是很多的。...文章摘要实现页面之间通信的方法实现父子页面和子页面与子页面之间通信的方法前端实现文件下载功能由于本文介绍的主要还是基于javascript，不涉及任何框架方面的问题（如果想研究vue，react...，angular方面的技术问题，可以移步我的其他文章），所以让我们用原生javascript来解决我们上面提到的问题吧。...$id('bridge').innerHTML = '子页面操控父页面dom' 从代码可以看到，我们使用parent.window拿到父页面的window，然后调用父页面提供的$id方法来操作父页面dom

1.6K3 0

iframe实现页面局部刷新原理解析

> javascript"> parent.document.getElementById('info').innerHTML = '登录成功...> javascript"> parent.document.getElementById('info').innerHTML = '登录失败...咱们来看看输出的什么值： javascript"> parent.document.getElementById('info').innerHTML...原理是将表单提交后跳转的页面，指向本页的iframe标签中，iframe刷新后，返回的是后端输出的javascript标签包裹的js代码，而返回的javascript代码可以直接运行，并且可以操作父页面中的元素...封装原生ajax还得考虑兼容，iframe就不用考虑兼容性的问题，但ajax对比iframe会更加简洁明了。在ajax没有普及之前，web开发的局部刷新用的都是iframe。

5.6K3 0

记一次老项目中的跨页面通信问题和前端实现文件下载功能

由于笔者之前维护了几个比较老的项目是用jquery全家桶开发的，其中有些需求是需要跨页面交互和父子页面通信，故借此总结一下。...另一块是前端实现文件下载功能，虽然方法很多，为了不用重复造轮子，在此还是总结一波，毕竟多页面下的应用场景还是很多的。...文章摘要实现页面之间通信的方法实现父子页面和子页面与子页面之间通信的方法前端实现文件下载功能由于本文介绍的主要还是基于javascript，不涉及任何框架方面的问题（如果想研究vue，react...，angular方面的技术问题，可以移步我的其他文章），所以让我们用原生javascript来解决我们上面提到的问题吧。...$id('bridge').innerHTML = '子页面操控父页面dom'复制代码从代码可以看到，我们使用parent.window拿到父页面的window，然后调用父页面提供的$id方法来操作父页面

8193 0

AjaxPro2完整入门教程

比如下面我们截取的图片就可以很好的解释这个问题获取int类型的值的结果：获取string类型的值的结果：这里我们可以清晰的看到类型是完全不一样的，这里我着重讲这些是因为后面我们可能会由于这个错误而导致无法调用服务端的代码...，却没法找出这其中的问题。...function writeToDocument(val) { 9 document.write(val.value + ""); 10 } 11 然后我们可以发现最后的结果更之前的实例是完全一样的...下面是客户端代码（重点） 1 javascript"> 2 window.onload = function () { 3...return new TestData 10 { 11 ID = "1" 12 }; 13 } 然后是客户端代码

1.4K2 0

点击加载更多

JavaScript——promise 是解决异步问题的方法嘛

从一个前端开发者的视角，聊聊“新上网导航”的技术取舍（含代码浅析）

在 JavaScript 中通过 queueMicrotask() 使用微任务

vue的两种路由模式

盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小

什么年代还在用传统 Pjax? —— 自定义 Pjax 提升页面加载速度

pwa-之service worker 基本概念

有关跨域请求的一些记录

「原生案例」如何在JavaScript中实现实时搜索功能

pwa-之service worker 离线文件处理

如何简单理解 JavaScript 的 Async 和 Await？

【JavaScript】解决 JavaScript 语言报错：Uncaught TypeError: Cannot read property ‘X‘ of null

【技术创作101训练营】innerHTML插入运行js字符串问题探究

Memos API 调用渲染页面

调用DeepSeek API增强版纯前端实现方案，支持文件上传和内容解析功能

带你深入了解 Module

前端复盘: iframe跨页通信和前端实现文件下载

iframe实现页面局部刷新原理解析

记一次老项目中的跨页面通信问题和前端实现文件下载功能

AjaxPro2完整入门教程

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐